我想使用flex-direction：列来表示特定的布局.
我通常使用标准的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%;
}
}
最佳答案
在ul上施加总高度并使其包裹.
然后在ul li(这是高度,因为我们已经应用flex-direction：column)上应用flex-basis到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%;
}希望这可以帮助！
