css - 如何在 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%。

对于每行 3 个元素，添加 flex 元素:

• flex 基础:33.333333%
• 您还可以像下面这样使用 flex 的简写:flex: 0 0 33.333333% => 这也意味着 flex-basis: 33.333333% 。

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