Flex Container Properties

flex-direction: row;

Item 1
Item 2
Item 3

flex-direction: row-reverse;

Item 1
Item 2
Item 3

flex-direction: column;

Item 1
Item 2
Item 3

flex-direction: column-reverse;

Item 1
Item 2
Item 3

flex-wrap: nowrap;

Item 1
Item 2
Item 3
Item 4

flex-wrap: wrap;

Item 1
Item 2
Item 3
Item 4

flex-wrap: wrap-reverse;

Item 1
Item 2
Item 3
Item 4

justify-content: flex-start;

Item 1
Item 2
Item 3
Item 4

justify-content: flex-end;

Item 1
Item 2
Item 3
Item 4

justify-content: center;

Item 1
Item 2
Item 3
Item 4

justify-content: space-between;

Item 1
Item 2
Item 3
Item 4

justify-content: space-around;

Item 1
Item 2
Item 3
Item 4

align-items: flex-start;

Item 1
Item 2
Item 3
Item 4

align-items: flex-end;

Item 1
Item 2
Item 3
Item 4

align-items: center;

Item 1
Item 2
Item 3
Item 4

align-items: stretch;

Item 1
Item 2
Item 3
Item 4

align-items: baseline;

Item 1
Item 2
Item 3
Item 4

align-content: flex-start;

Item 1
Item 2
Item 3
Item 4

align-content: flex-end;

Item 1
Item 2
Item 3
Item 4

align-content: center;

Item 1
Item 2
Item 3
Item 4

align-content: space-between;

Item 1
Item 2
Item 3
Item 4

align-content: space-around;

Item 1
Item 2
Item 3
Item 4

align-content: stretch;

Item 1
Item 2
Item 3
Item 4

Flex Items Properties

order: number;

Item 1
Item 2
Item 3
Item 4

flex-grow: number;

Item 1
Item 2
Item 3
Item 4

flex-shrink: number;

Item 1
Item 2
Item 3
Item 4

flex-basis: number;

Item 1
Item 2
Item 3
Item 4

align-self: flex-end;

Item 1
Item 2
Item 3
Item 4