Menu
The key is to set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.
Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.
I have the following
HTML
<div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
I want to achieve the following layouts using flexbox.
Mobile
Tablet
Desktop
I have no problem with mobile and desktop layouts, but could not solve it for tablets.
How to force .center div appear after .letf and .right? Is there a way to achieve it with flexbox?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With