flex-direction column property is not working

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