如何在flexbox中每行显示3个项目? [英] How to display 3 items per row in flexbox?

问题描述

我有一个列表，我想水平显示我的li元素，每行显示3个.我一直在努力获得想要的东西，但是没有运气.有解决办法吗?

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?

<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;
}

推荐答案

Flex容器:

• 您可能想使用display: flex而不是inline-flex.
• 添加flex-wrap: wrap以允许包装到多行中.
• 如果希望使用width: 33%占据全部可用空间，请删除它.

• You probably want to use display: flex not inline-flex.
• Add flex-wrap: wrap to allow wrapping onto multiple lines.
• Remove width: 33% if you wish it to take entire space avaiable.

对于每行3个项目，请添加弹性项目:

For 3 items per row, add on the flex items:

• flex-basis: 33.333333%
• 您也可以使用flex的简写，如下所示:flex: 0 0 33.333333% =>也表示flex-basis: 33.333333%.

• flex-basis: 33.333333%
• You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means 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>

这篇关于如何在flexbox中每行显示3个项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！