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;
}

score 185 · Accepted Answer · edited Mar 18 '20 at 11:40

185

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>

edited Mar 18 '20 at 11:40

Webwoman

10,196
12
43
87

answered Jan 26 '18 at 15:36

Stickers

75,527
23
147
186

2

How to combine that with flex gap. It seems to break if the item has a gap: 1em or any other value applied and only two are shown per row. – BenjaminK Oct 19 '21 at 22:17
1

@BenjaminK for padding add box-sizing: border-box to li, for margin say 1em change it to flex: 0 0 calc(33.333333% - 2em). – Stickers Oct 29 '21 at 18:20
how to combine gap and flex-basis ? – Saeed Arianmanesh Aug 06 '22 at 10:15

T04435 · Answer 2 · 2018-07-22T16:57:45.893

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>

In desktop, which is when I need them with specific size not bigger than that. — T04435, Jul 22 '18 at 16:49
@TemaniAfif you were right, I did not have 3 elements, the reason was the border I added to see the parent container, now I have changed it for background and 3 elements are shown per row. Thanks. — T04435, Jul 22 '18 at 16:59

Rohit Nishad · Answer 3 · 2021-08-09T14:12:06.653

body {
  margin: 0px;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-item{
   /* 
   All you need to do this play with this number (343) according to aviable width and item width 
   Formula: (ParentWidth / 3) - margin (ParentWidth divide by 3 subtracte by margin[if you want e.g in my case i set 10] )
   
   Stackoverflow Run Code Snippet width = 633.82px (not sure)
   Margin = 10px
   
   */
   flex: 0 0 192px; /* play with this number */
   background: red;
   margin: 10px;
}

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

How to display 3 items per row in flexbox?

3 Answers3

Linked

Related