Flex-direction column not working as expected [duplicate] - html

Question

This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 3 years ago.
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;
}

Answer 3

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