Flexbox

A one-dimensional layout model: items are placed along a main axis, and the free space is distributed between them by `flex-grow`, `flex-shrink` and `flex-basis`. It is content-driven, which makes it the right choice when the items should size themselves and the wrong one when you need columns to line up across rows. The default `min-width: auto` on flex items is the source of the classic bug where a long word refuses to shrink or a child overflows its container.