Question

标题说明了一切，我的列表应该是2列，因为显示器弯曲和50％宽度，但如果一侧较长，另一侧将有间隙，这就是我想要移除的。

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}
li {
  display: block;
  width: 50%;
  margin-bottom: 5px;
}

<ul>
  <li>Some Text Here</li>
  <li>Some Text Here Some Text Here Some Text Here</li>
  <li>Some Text Here</li>
  <li>Some Text Here</li>
  <li>Some Text Here</li>
</ul>

Answer 1

你将无法像这样使用flex，因为它们默认都具有相同的高度（你可以添加边框，你会看到）。

相反，您可以考虑使用这样的列：

* {
  box-sizing: border-box;
}

ul {
  column-count: 2;
  list-style: none;
  margin: 0;
}

li {
  display: block;
  margin-bottom: 5px;
}

<ul>
  <li>Some Text Here</li>
  <li>Some Text Here</li>
  <li>Some Text Here</li>
  <li>Some Text Here Some Text Here Some Text Here</li>
  <li>Some Text Here</li>
</ul>

如何故意不与flex-wrap具有相同/相等的高度？

1 个答案: