flex box layout

[wonderfan]

The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.

[wonderfan]

flex-grow A number specifying how much the item will grow relative to the rest of the flexible items

flex-shrink A number specifying how much the item will shrink relative to the rest of the flexible items

flex-basis The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit

[wonderfan]

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

[wonderfan]

The flex layout is constituted of parent container referred as flex container and its immediate children which are called flex items.

[wonderfan]

The good tutorial: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

[wonderfan]

very detailed guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[wonderfan]

Learn the layout: http://learnlayout.com/flexbox.html