Flexbox layout in CSS has unlocked countless design possibilities and greatly reduced the
implementation burden of common layouts. Many layout options are now supported
A Complete Guide to
Flexbox. At first, the
large set of CSS attributes can be a bit confusing. Let’s clear that up. Many
attributes follow a composite
justify \ / content | - | items align / \ self
The first part,
align, specifies the direction.
justify acts along the
direction of the flex, by default it is the horizontal alignment. In
align acts along the direction orthogonal to the flex direction, by
default it is the vertical alignment.
The second part defines which object(s) should be aligned. If you use
content, the whole
content of the component with
flex is aligned according to the value of the
items, on the other hand, aligns each child of the
self attributes can be used on the children of a
flex and not the
container itself. The
self property overrides the
items settings from the container.
For example, by default,
justify-items controls the alignment of the children on the
align-self overrides vertical alignment of a single item.