Question

如果使用flex列出列表，则看起来像这样。

12
34
56

我该如何在flex中安排它？有办法吗？

14
25
36

顺便说一句，如果增加到七个

这就像感觉。

.list_number {
  display: flex;
  flex-wrap: wrap;
}
.list_number > li {
  width: 50%
}

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Answer 1

有许多方法可以实现此目的，但是正如注释中提到的@TemaniAfif一样，最简单的方法是使用像这样的列：

ul{
    columns: 2;
 }

只需将其添加到您的CSS中，您就可以只用一行代码来实现相同的目的。

希望这会有所帮助。

Answer 2

flex-direction: column和max-height应该可以解决问题。

Answer 3

如果您愿意采用JavaScript方法，则只需检索<li>元素的高度（假设所有<li>元素的高度相同），将其乘以一半即可。将<li>'s元素内的<ul>设置为ul的高度。（如果<li>'s的数字是奇数，只需在值中再加上一个<li> 的高度。）

还要确保父级弹性容器.list_number具有属性flex-direction: column;和flex-wrap: wrap;，以便在先前的元素填充高度后，元素将自动进入下一列。

检查并运行下面的代码段，以获取上述内容的实际示例：

/* JavaScript */
const div = document.querySelector(".list_number");
const lists = document.querySelectorAll(".list_number li");
const height = window.getComputedStyle(lists[0]).height;

div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

/* CSS */

html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}

.list_number{
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<!-- HTML -->

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

关于CSS Flexbox中列表的顺序和方向

3 个答案: