CODEWITHSUNDEEP
htmlcssflexbox
Juan Pablo Fernandez
Juan Pablo Fernandez

Reputation: 2546

flex-direction column property 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.

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

Upvotes: 14

Views: 57383

Answers (2)

live-love
live-love

Reputation: 52484

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>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371979

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:

Upvotes: 20

Related Questions