Usage
Vertical Alignment
A flex layout can have vertically aligned items.
Gap
A flex layout can have a gap between his items. columnGap and rowGap are also available to specify a gap for a single axis.
Align Items
A flex layout can align its items along the cross-axis. When the direction is "column", this refers to horizontal alignment, and when the direction is "row", it refers to vertical alignment.
Justify Content
A flex layout can justify its items along the main axis. When the direction is "column", this refers to vertical alignment, and when the direction is "row", it refers to horizontal alignment.
Reverse
A flex layout can show its items in reverse order.
Wrap
Flex layout items can wrap multiple rows.
Nesting
Flex layouts can be nested.
Props
- direction?
- wrap?
- basis?
- grow?
- shrink?
- inline?
- style?
- className?
- id?
The flex direction of the container. Can be row, column, row-reverse or column-reverse.
Whether to wrap the flex items. The value can also be a boolean.
An alias for the css flex-basis property.
An alias for the css flex-grow property.
An alias for the css flex-shrink property.
Whether to display the flex container as an inline element.