Display: Flex
Display: Flex causes flex containers to act as a block element. The container will maintain the set or default dimensions.
Display: Inline-Flex
Display: Inline-Flex causes flex containers to act as an inline-block element. If no dimensions are set for the container, it will only stretch to the size of its children.
The flex-direction property sets the direction in which the main axis is laid out. If it's associated with a row, the main axis will be horizontal. If it's associated with a column, the main axis will be vertical.
Flex-Direction: Row
Flex-Direction: Row is the default setting. It places flex items in an inline horizontal row on the main axis.
Flex-Direction: Row-Reverse
Flex-Direction: Row-Reverse places flex items in reverse order in an inline horizontalrow on the main axis.
Flex-Direction: Column
Flex-Direction: Column places flex items vertically along the main axis.
Flex-Direction: Column-Reverse
Flex-Direction: Column-Reverse places flex items in reverse order vertically along the main axis.
The flex-wrap property allows flex items to wrap onto multiple flex lines (rows or columns of flex items) instead of having flex items overflow the container or shrink too small as they remain on one line.
Flex-Wrap: NoWrap
Flex-Wrap: NoWrap is the default setting. If the size of the flex items is greater than the size of the container, they will either overflow the container or shrink to fit depending on the property settings for the items.
Flex-Wrap: Wrap
Flex-Wrap: Wrap allows flex items to wrap onto multiple lines, preventing overflow and maintaining item size.
Flex-Wrap: Wrap-Reverse
Flex-Wrap: Wrap-Reverse allows flex items to wrap onto multiple lines in reverse order, preventing overflow and maintaining item size.
The flex-flow property is shorthand for both flex-direction and flex-wrap. The values need to be added in that order. The following example is just one of many combinations. The chart contains all value combinations.
Flex-Flow: Column Wrap
The above example shows the flex-flow: column wrap combination.
Flex-Flow Values
The table below shows all value combinations for flex-flow.
Remember that flex-direction: row and flex-wrap: nowrap are the default settings. If you want to use one or both of those, there is no need for this shorthand property.
| flex-flow: row-reverse wrap |
reverses the order of items and wraps horizontal overflow to a new line. |
1
2
3
4
5
6
|
|---|---|---|
| flex-flow: row-reverse wrap-reverse |
reverses the order of items and reverses the wrap order when moving horizontal overflow to a new line. |
1
2
3
4
5
6
|
| flex-flow: column wrap |
places items vertically and wraps all overflowing items in a new column. |
1
2
3
4
5
6
|
| flex-flow: column wrap-reverse |
Places items vertically and reverses the wrap order when placing overflowing items in a new column. |
1
2
3
4
5
|
| flex-flow: column-reverse wrap |
Places items vertically in reverse order and wraps all overflowing items in a new column. |
1
2
3
4
5
|
| flex-flow: column-reverse wrap-reverse |
Places items vertically in reverse orderand reverses the wrap order when placing overflowing items in a new column. |
1
2
3
4
5
|