92

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

3 Answers 3

200

For the flex container:

  • You probably want to use display: flex; not inline-flex.
  • Add flex-wrap: wrap; to allow items to wrap when needed.
  • Remove width: 33%; so it takes entire space available.

For 3 items per row, add these to the flex items:

  • flex-grow: 0; + flex-shrink: 0; + flex-basis: 33.3333%;
  • Or use the shorthand flex: 0 0 33.3333%;

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

.serv li {
  flex: 0 0 33.3333%;
  outline: 1px solid;
}
<div class="serv">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

EDIT

To add gap to flexbox, see this post.

But, it's a lot easier to use CSS grid instead:

.serv ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding-left: 0;
}

.serv li {
  outline: 1px solid;
}
<div class="serv">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

4
  • 3
    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
    Commented Oct 19, 2021 at 22:17
  • 2
    @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
    Commented Oct 29, 2021 at 18:20
  • how to combine gap and flex-basis ? Commented Aug 6, 2022 at 10:15
  • 1
    @SaeedArianmanesh added info for gap in flexbox and grid
    – Stickers
    Commented Mar 21 at 17:38
4

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>

2
  • In desktop, which is when I need them with specific size not bigger than that.
    – T04435
    Commented Jul 22, 2018 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
    Commented Jul 22, 2018 at 16:59
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.