html - 如何摆脱 flex-wrap 创建的额外空间

Question

我正在尝试使用 flex 的下拉菜单，当元素超过 6 个时，元素的宽度为 50%，小于 6 的元素宽度为 100%。

父容器应该有一个最大宽度，如果它们不是很多元素，应该缩小。所以我开始工作了，但我似乎无法摆脱 100% 宽元素右侧的额外“空间”。有没有人有解决这个问题的想法？如果元素中有很多文本，则额外的空间会变大，使其变得不必要大。

ul {
  background: red;
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
  min-width: 0;
  align-content: start;
}

li {
  flex-basis: 50%;
  margin: 0;
  padding: 0;
}


/* If there are less than 6 */
li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  flex-basis: 100%;
  min-width: 0px;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

Answer 1

我想用 flexbox 解决会很棘手，但您可以使用 float 轻松实现相同的效果，而无需额外的空格:

ul {
  background: red;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

li {
  float: left;
  padding: 0 5px;
}

li:nth-child(odd) {
  clear: left;
}

/* If there are less than 6 */
li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  float: none;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

或 CSS 网格:

ul {
  background: red;
  display: inline-grid;
  column-gap:5px;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

li:nth-child(2) {
  grid-column:2;
}

/* If there are less than 6 */
li:nth-last-child(-n+6):first-child ~ :nth-child(2) {
  grid-column:initial;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>