Overview
| Property | Description | Values |
|---|---|---|
| display | Sets the container as a flexbox element | flex | inline-flex | |
| flex-direction | Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. | row (initial) | row-reverse | column | column-reverse | |
| flex-wrap | Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in. | no-wrap (initial) | wrap | wrap-reverse | |
| justify-content | Aligns flex items along the main axis of the current line of the flex container. | flex-start (initial) | flex-end | center | space-between | space-around | |
| align-items | Sets the default alignment in the cross axis for all of the flex container’s items, including anonymous flex items. | flex-start (initial) | flex-end | center | baseline | stretch | |
| align-content | Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, | stretch (initial) | flex-start | flex-end | center | space-between | space-around | |
| align-self | Sets the alignment in the cross axis for the current flex item | auto (initial) | flex-start | flex-end | center | baseline | stretch | |
| flex | Specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. |
< flex-grow flex-shrink flex-basis > Examples - 0 1 auto (initial) | 3 0 auto | 0 1 50% | 0 3 auto | |
| order | Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. |
< integer > Examples - 0 (initial) | -1 | 1 | |
Properties Detail - Flex Container Properties
display
display: flex;
This value causes an element to generate a block-level flex container box.
1
2
3
4
5
display: inline-flex;
This value causes an element to generate an inline-level flex container box.
1
2
3
4
5
flex-direction
flex-direction: row;
1
2
3
4
5
flex-direction: row-reverse;
1
2
3
4
5
flex-direction: column;
1
2
3
4
5
flex-direction: column-reverse;
1
2
3
4
5
flex-wrap
flex-wrap: no-wrap;
1
2
3
4
5
flex-wrap: wrap;
1
2
3
4
5
flex-wrap: wrap-reverse;
1
2
3
4
5
justify-content
justify-content: flex-start;
1
2
3
4
5
justify-content: flex-end;
1
2
3
4
5
justify-content: center;
1
2
3
4
5
justify-content: space-between;
1
2
3
4
5
justify-content: space-around;
1
2
3
4
5
align-items
align-items: flex-start;
1
2
3
4
5
align-items: flex-end;
1
2
3
4
5
align-items: center;
1
2
3
4
5
align-items: baseline;
1
2
3
4
5
align-items: stretch;
1
2
3
4
5
align-content
align-content: stretch;
1
2
3
4
5
align-content: flex-start;
1
2
3
4
5
align-content: flex-end;
1
2
3
4
5
align-content: center;
1
2
3
4
5
align-content: space-between;
1
2
3
4
5
align-content: space-around;
1
2
3
4
5
Properties Detail - Flex Container Properties
align-self
align-self: auto;
1
2
3
4
5
align-self: flex-start;
1
2
3
4
5
align-self: flex-end;
1
2
3
4
5
align-self: center;
1
2
3
4
5
align-self: baseline;
1
2
3
4
5
align-self: stretch;
1
2
3
4
5
flex
flex: 0 1 auto;
1
2
3
4
5
flex: 3 0 auto;
flex-grow at 3
1
2
3
4
5
flex: 0 1 50%;
flex-basis at 50%
1
2
3
4
5
flex: 0 3 auto;
flex-shrink at 3
1
2
3
4
5
order
order: 0;
1
2
3
4
5
order: -1;
1
2
3
4
5
order: 1;
1
2
3
4
5