时间戳

首页 > 解决方案 > 如何证明 flex-wrap 上的项目是合理的？

html - 如何证明 flex-wrap 上的项目是合理的？

问题描述

我有一个元素及其子元素。我正在为 CSS 应用 flexbox。我在它上面使用了 flex-wrap 来将项目包装到溢出时的下一行。但是，当它包装时，我希望顶部的物品有均匀的空间并占据容器的整个宽度。有可能吗？我可以使用，网格或只是 CSS。

我希望从 1 到 6 的元素在第一行中均匀分布，而剩余的项目则在第二行中。

注意：我不想应用 justify-content: space-evenly 因为它将所有项目隔开，第二行看起来很奇怪。

nav{
background: black;
max-width: 300px;
display: flex;
flex-wrap: wrap;
}
a{
color: #0f0;
margin: 10px;
}
<nav>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
</nav>

标签： htmlcssflexbox

解决方案

space-between, space-evenly or space-around结合伪元素应该可以做到

更优选地间隔

nav {
  background: black;
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  
  justify-content: space-between;
}

a {
  color: #0f0;
  margin: 10px;
}

nav:after {
    content: '';
    flex: 1;
}
<nav>
  <a>one</a>
  <a>two</a>
  <a>three</a>
  <a>four five</a>
  <a>six</a>
  <a>seven eight</a>
  <a>nine ten</a>
</nav>
<p>Longer list </p>
<nav>
  <a>one</a>
  <a>two</a>
  <a>three</a>
  <a>four five</a>
  <a>six</a>
  <a>seven eight</a>
  <a>nine ten</a>
  <a>one</a>
  <a>two</a>
  <a>three</a>
  <a>four five</a>
  <a>six</a>
  <a>seven eight</a>
  <a>nine ten</a>
  <a>one</a>
  <a>two</a>
  <a>three</a>
  <a>four five</a>
  <a>six</a>
  <a>seven eight</a>
  <a>nine ten</a>
</nav>

推荐阅读