CSS Flexible Box Layout Module (Flexbox)

Flexbox Terminology


Reference: W3C

Terminology:

Display

Name: display
Value: flex | inline-flex
Initial: inline

Example

display/index.html:

Flex Container - Orientation Direction

Name: flex-direction
Value: row | row-reverse | column | column-reverse
Initial: row

Example

directions/index.html:

Flex Container - Orientation Wrap

Name: flex-wrap
Value: nowrap | wrap | wrap-reverse
Initial: nowrap

Example

wraps/index.html:

Flex Container - Orientation Direction & Wrap

Name: flex-flow
Value: <flex-direction> || <flex-wrap>
Initial: individual properties

Example

directions-wraps/index.html:

Flex Container - Alignment Content (Justify)

Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around
Initial: flex-start

Example

justify-contents/index.html:

Flex Container - Alignment Items

Name: align-items
Value: flex-start | flex-end | center | baseline | stretch
Initial: stretch

Example

alignment-items/index.html:

Flex Container - Alignment Content

Name: align-content
Value: flex-start | flex-end | center | space-between | space-around | stretch
Initial: stretch

Example

alignment-content/index.html:

Flex Item - Alignment Self

Name: align-self
Value: auto | flex-start | flex-end | center | baseline | stretch
Initial: auto

Example

alignment-self/index.html:

Flex Item - Ordering

Name: order
Value: <integer>
Initial: 0

Example

ordering/index.html:

Flex Item - Flexibility Grow

Name: flex-grow
Value: <integer>
Initial: 0

Example

flexibility-grow/index.html:

Flex Item - Flexibility Shrink

Name: flex-shrink
Value: <integer>
Initial: 1

Example

flexibility-shrink/index.html:

Flex Item - Flexibility Basis

Name: flex-basis
Value: content | <width>
Initial: auto

Example

flexibility-basis/index.html:

Flex Item - Flexibility Shorthand

Name: flex
Value: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
Initial: 0 1 auto

Example

flexibility/index.html:

Demo

References