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?

Answer 1

Erase the width for the ul element and add a width (between 26 and 33%) to li. In addition, use flex-wrap: wrap; to allow them to wrap to 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;
}

  

    

      

        
{{$service->title2}}
      
      

        {!!$service->description!!}
      
    
    

      

        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}
        
        

          {{$value->title}}
          
{!!$value->description!!}