How to Display 3 Items Per Row in Flexbox

How to display 3 items per row in flexbox?

Flex container:

You probably want to use display: flex not inline-flex.
Add flex-wrap: wrap to allow wrapping onto multiple lines.
Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

flex-basis: 33.333333%
You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

3 items per row with flexbox and gap

Use CSS-Grid instead?

body {
  background-color: lightgreen;
  margin: 10px;
  text-align:center;
}

.parent {
  display: inline-grid;
  width:80%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.child img {
  width: 100%;
  min-width: 0;
}

<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

</div>

How to set 3 items per row using flex when item has margin and border

You can use width: calc(100%/3 - 12px); on .item.

The 100%/3 will do 3 in a row. Then the -12px accounts for margin: 5px both sides = 10px. Then the same with border. 1px on either side affecting the width gives you 2px. For a total of 12px.

Note: you can use box-sizing: border-box; on .item to avoid having to use the 1px on either side of the border in the calculation.

.App {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.parent {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
  width: calc(100%/3 - 12px);
  /*box-sizing: border-box; - would make the calc -10px instead of -12px*/
}

<div class="App">
  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Flexbox: 4 items per row

You've got flex-wrap: wrap on the container. That's good, because it overrides the default value, which is nowrap (source). This is the reason items don't wrap to form a grid in some cases.

In this case, the main problem is flex-grow: 1 on the flex items.

The flex-grow property doesn't actually size flex items. Its task is to distribute free space in the container (source). So no matter how small the screen size, each item will receive a proportional part of the free space on the line.

More specifically, there are eight flex items in your container. With flex-grow: 1, each one receives 1/8 of the free space on the line. Since there's no content in your items, they can shrink to zero width and will never wrap.

The solution is to define a width on the items. Try this:

.parent {  display: flex;  flex-wrap: wrap;}
.child {  flex: 1 0 21%; /* explanation below */  margin: 5px;  height: 100px;  background-color: blue;}

<div class="parent">  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div></div>

Need a responsive solution for wrapping 3 list items per row

Use :after pseudo element to simulate an invisible child div so the alignment of the items is fixed to left. And media queries for the responsive. Check the snippet to get some idea.

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}

.parent::after {
  content: "";
  width: 30%;
  height: 0;
}

.child {
  flex-basis: 30%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width : 1024px) {
  /* for tablet */
  .parent::after {
    width: 46%;
  }
  .child {
    flex-basis: 46%;
  }
}

@media only screen and (max-width : 768px) {
  /* for mobile */
  .parent::after {
    display: none;
  }
  .child {
    flex-basis: 100%;
  }
}

<div class="parent">
  <div class="child"> <span>1</span> </div>
  <div class="child"> <span>2</span> </div>
  <div class="child"> <span>3</span> </div>
  <div class="child"> <span>4</span> </div>
  <div class="child"> <span>5</span> </div>
</div>

How can I show three columns per row?

This may be what you are looking for:

http://jsfiddle.net/L4L67/

body>div {  background: #aaa;  display: flex;  flex-wrap: wrap;}
body>div>div {  flex-grow: 1;  width: 33%;  height: 100px;}
body>div>div:nth-child(even) {  background: #23a;}
body>div>div:nth-child(odd) {  background: #49b;}

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

How to make flex box with limit 2 elements per row?

.container {
  display: flex;
  flex-wrap: wrap;
}

.inner {
  flex-basis: 50%;
  flex-grow: 1;
}

.inner:nth-of-type(1) {
  background: red;
}

.inner:nth-of-type(2) {
  background: gold;
}

.inner:nth-of-type(3) {
  background: green;
}

.inner:nth-of-type(4) {
  background: blue;
}

<div class="container">
  <div class="inner">one</div>
  <div class="inner">two</div>
  <div class="inner">three</div>
  <div class="inner">four</div>
</div>

Set flex columns per row with dynamic number of items

Try this

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;
}

.item {
  height: 100%;
  margin: 4px;
  background: #16B6B6FF;
  width: 100%;
  max-width: calc(25% - 8px);
}

How to Display 3 Items Per Row in Flexbox