I have a flex
item that has three divs
inside of it.
┌────────────────────────────────────────┐
| WRAPPER |
| ┌─────────┬───────────┬──────────┐ |
| | LEFT | CENTER | RIGHT | |
| | | | | |
| └─────────┴───────────┴──────────┘ |
└────────────────────────────────────────┘
And I want to move the center
column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen.
The problem I have is that when the center
column comes to the next line, the right
column does not fit on the wrapper.
Here is my HTML
code:
<div id="wrapper">
<div class="block left">Left</div>
<div class="block center">Center</div>
<div class="block right">Right</div>
</div>
Here is my CSS
code:
html, body{
height: 100%;
}
body{
margin: 0;
}
#wrapper{
display: flex;
width: 100%;
height: 50px;
align-items: center;
text-align: center;
}
.block{
height: 50px;
}
.left{
width: 20%;
background-color: red;
order: 1;
}
.center{
width: 60%;
background-color: green;
order: 2;
}
.right{
width: 20%;
background-color: blue;
order: 3;
}
@media all and (max-width: 600px) {
#wrapper{
flex-flow:column wrap;
height: 100px;
}
.center {
width: 100%;
order: 3;
}
.left{
width: 50%;
}
}
JSFiddle where you can see how it is displayed.
Is it possible to move the middle column to the next line occupying 100% of the width of the screen using flexbox
? If it is, what am I missing?
Thanks in advance!