Juan Pablo Fernandez Juan Pablo Fernandez - 5 months ago 30
HTML Question

flex-direction: column; is not working

I have a

ul
tag with
display: flex
.

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

See the Travel submenu on the top menu at http://pearceonearth.com/

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


I appreciate the help.

Answer

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 item are aligning horizontally in a row that wraps.

As a solution, either specify both flex-flow components:

flex-flow: column wrap

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

flex-wrap: wrap;

ALSO NOTE: If you want your column to wrap you need to define a height on the container. Otherwise, you may only get one column, and the container will grow with it.

Reference: