Flexbox layout in CSS has unlocked countless design possibilities and greatly reduced the implementation burden of common layouts. Many layout options are now supported without the use of additional JavaScript. The use of Flexbox is detailed in 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 verb-object scheme.

justify \       / content
         |  -  |  items
align   /       \ self

The first part, justify or align, specifies the direction. justify acts along the direction of the flex, by default it is the horizontal alignment. In contrast, 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 property. items, on the other hand, aligns each child of the container individually. 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 horizontal axes. align-self overrides vertical alignment of a single item.