Flexbox

This page shows minimalist flex box examples. Look at its source code (written in Pug, and using simple CSS-based placeholders).

For reference, here are unconstrained (non-flex) *x64 and 128x64 placeholders.

Adding display: flex to a parent div, by default makes its children as small as possible. Contrast that behavior with the above *x64, that expands as much as possible.

We can control the sizing of the children with flex-basis. Here we assign it the same width as a .b-128x64 placeholder.

In addition of flex-basis, we can request its width to expand or contract depending on the available width (in the parent).

In the example below, consider removing the flex-wrap: wrap rule, or the flex-shrink: 0 rule (or both), or adding flex-grow: 1. (A reference 128x64 div is shown first.)

If we want to stretch rows to fill the available width, while having all items have the same width, it is possible to use a grid layout instead of flexbox. (A reference 128x64 div is shown first.)

The switcher pattern allows to distribute the space horizontally, unless there isn't enough room, at which point it switches to a vertical layout. (See every-layout.)