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

This question already has answers here:

Awkward spacing between 2 column list items
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
标题说明了一切
由于显示的弯曲和50％的宽度，我的列表应该是2列，但是如果一侧较长，另一侧会有间隙，这就是我要删除的内容。

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>

最佳答案

您将无法使用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>

关于html - 如何在flex-wrap中故意不具有相同/相等的高度？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47630896/