Question

我有32个列表项，分为两个列表，每行需要显示5个。我无法编辑HTML，因为有52个项目，其中一个总是独立存在。它需要一行的整个宽度，当我希望它保持对齐时，其余为20％。我该如何解决这个问题？

为了让事情更容易理解，这是我的代码。如果有更好的方法，请告诉我。谢谢！

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  list-style: none;
  margin-left: 0;
}

.item {
  flex: 1 20%;
  text-align: center;
  font-size: 15px;
}

＆＃13;

<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>
<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>

＆＃13;

Answer 1

flex-grow中的1值flex: 1 20%会让它们填充剩余的空格，因此请将其更改为flex-basis: 20%并保持所有宽度相同弹性物品。

同时删除justify-content: space-between或者它会在任何超过1但小于5的项目之间创建相等的空格，以防止它们向左对齐。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;  
  list-style: none;
  margin-left: 0;
}

.item {
  flex-basis: 20%;
  text-align: center;
  font-size: 15px;
}

＆＃13;

<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>
<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>

＆＃13;

每行五个项目，弯曲，左对齐

1 个答案: