Flex layouting CheatSheet - MDN
Best 1D layouting tool out there
- Flexible boxes, or flexbox, is a new layout mode in CSS3.
- Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
- For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
Some of the advantages of flexbox are:
- Page content can be laid out in any direction (to the left, to the right, downwards or even upwards)
- Bits of content can have their visual order reversed or rearranged
- Items can “flex” their sizes to respond to the available space and can be aligned with respect to their container or each other
- Achieving equal-column layouts (irrespective of the amount of content inside each column) is a breeze.