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 {
  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%;
}

希望这可以帮助！

Answer 2

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

容器上没有固定高度，物品不知道该包裹在哪里。

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