flex-direction 列属性不起作用

Question

I have a ul tag with display: flex .

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

CSS for the container:

#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 for the child:

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

Answer 1

Here is the source of your problem: flex-flow: wrap

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

The initial values of this property are row nowrap .

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

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

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

As a solution, either specify both components:

flex-flow: column wrap

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

flex-wrap: wrap

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.

Reference:

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

Answer 2

If flex direction column is not working, make sure you didn't forget to specify the height:

Example:

#container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.child {
    width: 200px;
    /* height: 200px;*/
    flex: 1;
}

#child1 {
    background-color: red;
    flex: 2;
}

#child2 {
    background-color: green;
}

#child3 {
    background-color: blue;
}

<section id="container">
    <div id="child1" class="child"></div>
    <div id="child2" class="child"></div>
    <div id="child3" class="child"></div>
</section>