CSS Flex Box layout is a new specification/layout model from W3C, the standards organization for the World Wide Web.
The main purpose of CSS Flex Box layouts is to provide a simpler means to dynamically resize 'content boxes' on webpages depending on available screen-space, size and resolution. 'Content boxes' typically contain distinct columns of text, images, forms, charts, navigation elements. The layout system thus provides a new means to approach Responsive website design
Flex boxes consist of a Flex Container which contains Flex items. Flex Boxes have two axes the main axis (typicaly left-to right or top to bottom) and a cross-axis which is perpendicular to the main axis.
Within a Flex Box framework, the flex items can be controlled in terms of direction, alignment, order and wrap .
The following webpages provide in-depth information on how to use Flex Box:
- CSS Tricks.com: A complete Guide to Flex Box
- Smashing Magazine: Harnessing Flexbox for Today's Web Apps
- Mozilla Developer Network: Using CSS flexible boxes
- Flexbox in 5 Mins: Interactive on-line try-out
- W3.org: CSS Flexible Box Layout Module Level 1
- Can I use?: Browser support
About Grid layouts and ratios:
- A List Apart: Content-out layout ("Grids do not exist in a vacuum")