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