Container

display

justify-content

• flex-flow (<dir> <wrap>)

align-items

align-content (multiple rows)

Items

order

• flex (<gr> <sh> <ba>; 0 1 auto)

align-self

Properties for the Parent(flex container)

display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

.container {
  display: flex;/* or inline-flex */}

Note that CSS columns have no effect on a flex container.

flex-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. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

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

• row (default): left to right in ltr; right to left in rtl
• row-reverse: right to left in ltr; left to right in rtl
• column: same as row but top to bottom
• column-reverse: same as row-reverse but bottom to top

flex-wrap