Flex-direction column not working as expected [duplicate]

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?

Answer 1

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/

Answer 2

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