- Display
- Flex Direction
- Flex Wrap
- Flex Flow
- Justify Content
- Align Items
- Align Content
- FlexBox Box Layout
display: property-name;
flex
flex-direction: property-name;
row
row-reverse
column
column-reverse
flex-wrap: property-name;
nowrap
wrap
wrap-reverse
flex-flow: property-name;
nowrap
wrap
wrap-reverse
justify-content: property-name;
center
flex-start
flex-end
space-between
space-around
space-evenly
align-items: property-name;
center
flex-start
flex-end
baseline
stretch
align-content: property-name;
center
flex-start
flex-end
baseline
stretch
order: property-name;
order-first
order-last
order: 5;
/* default is 0 */
flex-grow: property-name;
1
2
3
4
5
flex-shrink: property-name;
1
2
3
4
5
flex-basic: property-name;
flexBasis="200px"
flex: property-name;
1
2
3
auto
flex-start
flex-end
center
baseline
stretch;