CSS Flexbox Elastic Box model

CSS Flexbox Elastic Box model

Set the element style to Display:flex or Display:inline-flex, which makes the element a flex container, so that its child elements can be laid out in flex mode.

Flex-direction:

Value Row | Row-reverse | Column | Column-reverse
Default Value row

Flex-wrap:

Value NoWrap | Wrap | Wrap-reverse
Default Value nowrap

Flex-flow:

Value <flex-direction>‖<flex-wrap>
Default Value Row nowrap

Flex Sub-object distribution justify-content:

Value Flex-start | Flex-end | Center | Space-between | Space-around |space-evenly
Default Value Flex-start

Align-items:

Value Flex-start | Flex-end | Center | Baseline | Stretch
Default value Stretch

Align-self:

Value Auto |flex-start | Flex-end | Center | Baseline | Stretch
Default Value Auto

Align-content:

Value Flex-start | Flex-end | Center | Space-between | Space-around |space-evenly | Stretch
Default value Stretch

Flex-grow:

Value <number>
Default value 0

Flex-shrink:

Value <number>
Default value 1

Flex-basic: <width>

Value Auto | <length> | <percentage>
Default Value Auto

Flex:

values [<flex-grow> <flex-shrink>?‖<flex-basis>] | None
Default value 0 1 auto

CSS Flexbox Elastic Box model