How to display 3 items per row in flexbox?

Question

I have a list and I want to display my li elements horizontally and 3 per row. I've been trying to get what I want, but no luck. Is there a solution?

<div class="serv">
  <ul>                                             
    @foreach(App\Http\Controllers\HomeController::getservice($service->id) as 
    $key => $value)
    <li>
      <span class="h3-service">{{$value->title}}</span>
      <p>{!!$value->description!!}</p>
    </li>
    @endforeach
  </ul>
</div>

---

.serv ul {
  display: inline-flex;
  margin: 0;
  padding: 0;
  width: 33%;
  text-align: left;
  float: left;
}
.serv ul li {
  list-style: none;
  display: inline-block;
  padding: 0;
}
.serv ul li span {
  padding: 0;
}

Answer 1

I had this same issue, but the selected correct answer did not work cause the my child items needed to have a fix width so here is my solution to show X items of fix width on DISPLAY: FLEX.

// Flex item width required: 215px // Flex item margin 20px on each side: 215px + 20 + 20 = 255px // I needed 3(your item per row) so: 255px * 3 // Then to (100% of parent-flex minus 255 * 3) / 2 padding on each side // So it stays in the center. padding: 40px calc((100% - (255px * 3)) / 2); 

*, *::before, *::after {      box-sizing: border-box;  }    .parent-flex {    display: flex;    flex-wrap: wrap;    justify-content: center;    background-color: tomato;    padding: 40px calc((100% - (255px * 3)) / 2);  }    .flex-item {     height: 100px;     flex: 0 0 215px;     margin: 1em 20px;     border: 2px blue solid;  }

<div class="parent-flex">    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>  </div>

Answer 2

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>