Flex-direction column not working as expected

Question

I have the following markup:

<div class="container">
  <div class="logo"></div>
  <div class="search"></div>
  <div class="button"></div>
</div>

CSS (desktop):

.container {
  display: flex;
}

On a desktop view they're displayed in a row, like that:

But on mobile view, i want them to re-reorder:

I've tried the following styles:

// here's media query for mobile devices
.container {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch // so my items would be filling width
}

.logo {
  order: 1;
  flex: 1 0 50%;
}

.search {
  order: 2;
  flex: 0 1 100%;
}

.button {
  order: 1;
  flex: 1 0 50%;
}

But my results are:

Is this even possible with a flexbox?

this is still a row direction, no need column (simply remove it and it will work fine) — Temani Afif, May 23 '19 at 20:59

score 3 · Accepted Answer · answered May 23 '19 at 21:26

You should look into "flex-grow" which allows flex items to grow if necessary in order to take up as much space as is available in its container. If all flex-items (in your case: .logo, .search, .button) have a flex-grow value of 1, the remaining space in .container will be distributed to its children equally.

Also, you should use

    flex-direction: row;

in your case if you want them to stretch horizontally

Check out this fiddle for reference! https://jsfiddle.net/hgs5w19y/2/

Thanks, you forgot to use `order` in your example? Indeed, why do i use `flex-direction: column`... — Alexander Kim, May 24 '19 at 03:42

score 2 · Answer 2 · answered May 23 '19 at 21:07

You need to use flex-grow (great resource for understanding flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

HTML

<div class="container">
  <div class="logo">Logo</div>
  <div class="search">Search</div>
  <div class="button">Button</div>
</div>

CSS

.container {
  background-color: #ccc;
  display: flex;
  width: 300px;
  flex-wrap: wrap;
  text-align: center;
}

.container > div {
  background-color: grey;
  margin: 10px 20px;
  padding: 10px 20px;
}

.logo {
  order: 1;
  flex-grow: 1;
}

.search {
  order: 2;
  flex-grow: 2;
}

.button {
  order: 1;
  flex-grow: 1;
}

Also, i don't understand how's height calculated when i use `flex-wrap: wrap`, is it possible to make all of the items of equal height? — Alexander Kim, May 24 '19 at 04:51

score 0 · Answer 3 · answered May 23 '19 at 21:11

No need of direction nor so many rules, just set a breakpoint and reset .search behavior

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
}

div.search {
  order: 1;
  flex-basis: 100%;
}

@media screen and (min-width:731px) {
  div.search {
    order: 0;
    flex: 1
  }
}


/* demo purpose */

.container {
  background: gray;
}

.container>div {
  padding: 1em;
  margin: 1em;
  background: lightgray;
}

.container>div:before {
  content: attr(class);
  color: black;
}

<div class="container">
  <div class="logo"></div>
  <div class="search"></div>
  <div class="button"></div>
</div>

breakpoint value is to be updated to yours (here set at 731 for the demo) , to see behavior, run the snippet in full page, or play with the demo https://codepen.io/gc-nomade/pen/mYXZdY

Flex-direction column not working as expected

3 Answers3