display
justify-content
flex-flow
(<dir> <wrap>)align-items
align-content
(multiple rows)
order
flex
(<gr> <sh> <ba>; 0 1 auto)align-self
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.
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 bottomcolumn-reverse
: same as row-reverse
but bottom to top