不包装在列方向容器中的Flex项

Question

我想将flex-direction:column用于特定的布局。

我通常使用标准flex-direction:row，所以我在使用column时遇到了一些问题。我不知道如何控制它，也没有在谷歌上找到任何有用的东西。

我有一个常规的UL列表，我想要的是：

1 3 5 7

2 4 6

我现在得到的是：

1
2
3
4
5
6
7

我目前的简化代码如下：

.ul{
  display: flex;
  flex-direction: column;

  li{
    width: 25%;
  }
}

Answer 1

将总height应用于ul并使其成为wrap。

然后将flex-basis应用于ul li (即高度，因为我们已经应用了flex-direction: column)到50%。比如：

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

请看下面的片段：

​

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

​

希望这能有所帮助！

Answer 2

您需要给flex容器一个定义的高度。

如果容器上没有固定的高度，这些物品就不知道包装在哪里。

您还需要添加flex-wrap: wrap，因为flex容器的初始设置是nowrap。

Answer 3

对于要跨多列的列表：

1. 必须指定定义的高度。
2. 通过使用flex-wrap: wrap将其设置为包装(默认情况下它被设置为nowrap)

见下面的演示：

​

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}
li {
  width: 25%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

​