flex-direction 列属性不起作用 [英] flex-direction column property is not working

问题描述

我有一个带有 display: flex 的 ul 标签.

I have a ul tag with display: flex.

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

I need it ordered by column with flex-direction: column;, but it does not work.

容器的 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; */
}

推荐答案

这里是你问题的根源:flex-flow: wrap

这是 flex-direction 和/或 flex-wrap 的速记属性.

This is a shorthand property for flex-direction and/or flex-wrap.

该属性的初始值为row nowrap.

您只声明了 flex-wrap 组件:wrap.

You have only declared the flex-wrap component: wrap.

这意味着 flex-direction 组件保持默认值:row.

This means that the flex-direction component remains the default value: row.

因此，您的 flex 项目在环绕的一行中水平对齐.

Hence, your flex items are aligning horizontally in a row that wraps.

作为一种解决方案，要么指定两个组件:

flex-flow: column wrap

或者，因为你已经在规则中有 flex-direction: column，删除 flex-flow 并使用:

OR, since you already have flex-direction: column in the rule, remove flex-flow and use:

flex-wrap: wrap

同样重要:如果你想让 flex 项目在列方向上换行，你需要在容器上定义一个高度.如果没有固定的高度，弹性项目不知道在哪里包装，它们将保持在一个列中，根据需要扩展容器.

Also important: If you want flex items to wrap in column-direction, you need to define a height on the container. Without a fixed height, the flex items don't know where to wrap and they'll stay in a single column, expanding the container as necessary.

参考:

• 5.3.Flex Direction 和 Wrap:flex-flow 简写

这篇关于flex-direction 列属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！