Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
flex-direction: row | row-reverse | column | column-reverse | Flex Direction |
flex-wrap: nowrap | wrap | wrap-reverse | Flex Wrap |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | Justify Content |
align-items: flex-start | flex-end | center | baseline | stretch | Align Items |
align-content: flex-start | flex-end | center | space-between | space-around | stretch | Align Content |
order: 0 | Order |
flex-grow: 0 | Flex Grow |
flex-shrink: 1 | Flex Shrink |
flex-basis: 3px | auto | Flex Basis |
align-self: auto | flex-start | flex-end | center | baseline | stretch | Align Self |