How to display 3 items per row in flexbox?

Question

I have a list, and I want to display li elements horizontally and 3 lines each. I tried 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

Flex container:

• You probably want to use display: flex not inline-flex .
• Add flex-wrap: wrap to allow multiple line wrapping.
• Remove width: 33% if you want it to occupy all available space.

Flexible item:

• Add flex: 0 0 33.333333% for 3 items in a row.

 .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> 

Answer 2

Remove the width for the ul element and add the width (26 to 33%) to li . Also use flex-wrap: wrap; so that they can wrap on new lines:

 .serv ul { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; text-align: left; } .serv ul li { list-style: none; display: inline-block; padding: 0; border: 1px solid #ccc; width: 30%;} .serv ul li span { padding: 0px; } 

 <div class="content-wrap"> <section id="section-linemove-{{$service->id}}"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="big-title3 small-area"> <h4>{{$service->title2}}</h4> </div> <div> {!!$service->description!!} </div> </div> <div class="serv"> <ul> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> </ul> </div> </section> </div> 

Answer 3

use this witdh: 33% in the li section and not in the ul section.

Answer 4

I had the same problem, but the selected correct answer did not work because my children had to have a fixed width, so here is my solution to display X elements of a fixed 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>