Flexbox Video Tutorial

Flexbox is a new layout mode (display) that allows you to arrange items more flexibly and predictably manage their alignment regardless of the size of the screen. This new layout mode is positioned as an improvement of the block model based on the floats.

Useful links

Basic operation

To use flexboxes just put a display flex on the element encompassing several children. The direct children will then stand next to each other trying to occupy all available space. It is then possible to control the behavior of the children thanks to properties like flex Steering, flex-wrap, justify-happy, etc ...

For all available properties I refer you to this page css-tricks.com which summarizes very well these properties and their effect on the elements in flex.

Compatibility

Flexboxes are supported by all modern browsers except Internet Explorer (we are getting used to it ...)

• IE11 supports flexboxes quite well but has some bugs in some cases (cf caniuse.com)