html – Flex项目未包装在列方向容器中

前端之家收集整理的这篇文章主要介绍了html – Flex项目未包装在列方向容器中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想使用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%;
}

希望这可以帮助!

原文链接:https://www.f2er.com/html/426266.html

猜你在找的HTML相关文章