Basics of CSS flexbox

Flexbox is ideally suited for a set of smaller elements — often DIVs — that have to fill or fit within a particular space on the page. A set of elements (flex items) is wrapped in a container with the display: flex declaration in its CSS rule.

Rama
Sita
Hanuman
Lakshmana
Ravana

Here's a variation, using a slightly smaller font-size.

Rama
Sita
Hanuman
Lakshmana
Ravana

And another variation, adding a sixth element into the set.

Sugriva
Rama
Sita
Hanuman
Lakshmana
Ravana

Note that to lay out an entire page, you would be advised to use CSS grid instead of flexbox. Flexbox governs elements along only one axis, either horizontal or vertical. Grid provides control along both axes.

index | GitHub