title: How to display 3 items per row in flexbox?
body: <p>I have a list and I want to display my <code>li</code> elements horizontally and 3 per row. I've been trying to get what I want, but no luck. Is there a solution?</p>
  
  <pre><code>&lt;div class="serv"&gt;
    &lt;ul&gt;                                             
      @foreach(App\Http\Controllers\HomeController::getservice($service-&gt;id) as 
      $key =&gt; $value)
      &lt;li&gt;
        &lt;span class="h3-service"&gt;{{$value-&gt;title}}&lt;/span&gt;
        &lt;p&gt;{!!$value-&gt;description!!}&lt;/p&gt;
      &lt;/li&gt;
      @endforeach
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.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;
  }
  </code></pre>