如何在flexbox中每行显示3个项目？

Question

我有一个列表,我希望li水平显示我的元素,每行3个.我一直试图得到我想要的东西,但没有运气.有解决方案吗？

<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容器:

• 你可能想使用display: flex不inline-flex.
• 添加flex-wrap: wrap以允许包装到多行上.
• 删除width: 33%让它成长.

Flex项目:

• flex: 0 0 33.333333%每行添加3个项目.

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