I have a flex item that contains three divs.
┌────────────────────────────────────────┐
| WRAPPER |
| ┌─────────┬───────────┬──────────┐ |
| | LEFT | CENTER | RIGHT | |
| | | | | |
| └─────────┴───────────┴──────────┘ |
└────────────────────────────────────────┘
On small screens (less than 600px), I want to move the center column to the next line and make it occupy 100% of the width.
The issue arises when the center column moves down, as the right column does not fit within the wrapper.
Below 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>
This 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%;
}
}
View the JSFiddle link to see the display.
Can the middle column be moved to the next line, occupying 100% of the screen width using flexbox? If so, what am I overlooking?
Thank you in advance!