CSS Flexbox: set size and order
“Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.”
CSS Flexbox makes page layout so much easier and it is crucial for web developers to master. Let us see how can it help us:
If you have divs with different sentence lengths, how would you make them the same height in a row?
I set up a “Container” div with three divs inside, without any layout styling, three divs show up in the page in order like this:
After I set the Container div to display:flex
.Container {
display:flex;
}
Three divs arranged horizontally and they have the same height:
How would you make those divs the same size and make div2 in front of div1?
You can limit each div to flex:1, this will make them the same size. If you want to make one of them larger, you can set that one to flex:2.
To arrange the order, you can just assign the order to different numbers. To make div2 show up in front of div1, div2 will have order:1, and div1 will have order:2:
Now the page will look like this:
Resource: