The Flexible Box Module, popularly known as flexbox, was created to “improve the items align, directions and order in the container even when they are with dynamic or even unknown sizes.” It is best known for its ability to adjust the “width or height of its children to fill the available space in the best possible way on different size screens” (Stojanov).
The flexbox layout has a flex container and in that are flex items. The container can be vertical or horizontal. “The direct children of a flex container are laid out along the main axis. These children can ‘flex’ their sizes, growing to fill unused space in the container, or shrinking to avoid overflowing” (Vandehey).
There are many properties to learn with flexbox but it does have smart defaults that allow you to created powerful layouts (Vandehey). Set the display property in the parent HTML element to start using the flexbox layout (Stojanov).
Some common ways to use flexbox include:
All the major browsers support flexbox. For older browsers you can use Modernizr or graceful degradation (Vandehey).
Overall, Flexbox can do the same thing the standard grid layout does but with less code, which makes it cleaner. “It’s stable, easy-to-use, and well-supported” (Vandehey).