Container
- display: flex or inline-flex.
- flex-direction: row, row-reverse, column, or column-reverse. This determines whether items are ordered horizontally (rows) or vertically (columns).
- flex-wrap: nowrap, wrap, wrap-reverse. By default all flex items will try to squeeze onto a single row.
- flex-flow: Shorthand for flex-direction and flex-wrap.
- justify-content: flex-start, flex-end, center, space-between, space-around. Determines how extra free space beyond that consumed by the flex items will be placed.
- align-items: flex-start, flex-end, center, stretch, baseline. Defines how items are laid out along the cross axis of current row.
- align-content: flex-start, flex-end, center, stretch, space-between, space-around. Determines how extra free space is distributed on the cross-axis.
Items (childen of container)
- order: on an individual item allows for an integer to be given that determines the order of the item. By default they are ordered as they are delineated in the source code.
- flex-grow: takes an integer. This defines how much of the space the item is allowed to consume in a given container.
- flex-shrink: takes an integer.
- flex-basis: length or keyword. The main-size keyword is deprecated, auto is an option, and there are content (max-content, etc.) available but not supported enough for usage.
- flex: Shorthand for flex-grow, flex-shrink, and flex-basis.1CSS-Tricks recommends using this rather than the individual properties. The shrink and basis values are option, default is 0 1 auto.
- align-self: auto, flex-start, flex-end, center, baseline, stretch. Overrides the default alignment or align-items specification for individual item.
Bibliography / Further Reading
- Chris Coyier. A Complete Guide to Flexbox. CSS-Tricks, Nov. 3, 2015.