Flex layout

Basics

If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”.

Flex properties

Direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.

flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Align self

align-self

Issue: Flexbox "align-items : center" shrinks a child's max-width

.container {
  align-self: center;
  max-width: 200px;
  width: 100%;
}