Question

我的ul代码为display: flex。

我需要按flex-direction: column;的列排序，但它不起作用。

容器的css

#nav li.four_columns ul.sub-menu {
  width: 600px;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: wrap;
}

为孩子提供css

#nav li.four_columns ul.sub-menu li {
  flex-basis: 25%;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* border-bottom: none; */
}

我很感激帮助。

Answer 1

以下是问题的根源：flex-flow: wrap

这是flex-direction和/或flex-wrap的简写属性。

此属性的初始值为row nowrap。

您只声明了flex-wrap组件：wrap。

这意味着flex-direction组件仍为默认值：row。

因此，您的弹性项目在水平对齐的行中包裹。

作为解决方案，指定两个组件：

flex-flow: column wrap

或者，由于规则中已有flex-direction: column，请删除flex-flow并使用：

flex-wrap: wrap

同样重要：如果您希望弹性项目在列方向上换行，则需要在容器上定义高度。没有固定的高度，flex项目不知道在哪里包装，它们将保留在一个列中，根据需要扩展容器。

参考：

5.3. Flex Direction and Wrap: the flex-flow shorthand

弯曲方向：柱;不管用

1 个答案: