A Recap of Flexbox

TL; DR

Element Property Values Default
flex-container display flex | inline-flex N/A
flex-direction row | row-reverse | column | column-reverse row
flex-wrap nowrap | wrap | wrap-reverse nowrap
flex-flow <'flex-direction'> || <'flex-wrap'> row nowrap
justify-content flex-start | flex-end | center | space-between | space-around | space-evenly flex-start
align-items flex-start | flex-end | center | baseline | stretch stretch
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch
flex-item order <number-with-no-unit> 0
flex-basis <number-with-unit> | auto auto
flex-grow <number-with-no-unit> 0
flex-shrink <number-with-no-unit> 1
flex none | <'flex-grow'> <'flex-shrink'> || <'flex-basis'> 0 1 auto
align-self auto | flex-start | flex-end | center | baseline | stretch auto

Parent properties (flex container)

display

Enables a flex context for all direct children.

.flex-container {
    display: flex | inline-flex;
}

See the Pen 1/11: Flexbox display example by Howard Dyer (@howarddyer) on CodePen.

flex-direction

Defines the main axis of the flex context.

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse; /* default: row */
}

See the Pen 2/11: Flexbox flex-direction example by Howard Dyer (@howarddyer) on CodePen.

flex-wrap

Flex items will, by default, naturally try and fit onto one line. This property can be used to redefine this behaviour.

.flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse; /* default: nowrap */
}

See the Pen 3/11: Flexbox flex-wrap example by Howard Dyer (@howarddyer) on CodePen.

flex-flow

Shorthand for flex-direction and flex-wrap.

.flex-container {
    flex-flow: <'flex-direction'> || <'flex-wrap'>; /* default: row nowrap */
}

justify-content

Controls the alignment/distribution of flex items along the main axis.

.flex-container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /* default: flex-start */
}

See the Pen 4/11: Flexbox justify-content example by Howard Dyer (@howarddyer) on CodePen.

align-items

Controls the alignment/distribution of flex items along the cross axis (affecting each individual line of flex items).

.flex-container {
    align-items: flex-start | flex-end | center | baseline | stretch; /* default: stretch */
}

See the Pen 5/11: Flexbox align-items example by Howard Dyer (@howarddyer) on CodePen.

align-content

Controls the alignment/distribution of multiple lines of flex items along the cross axis (affecting multiple lines of flex items as one).

.flex-container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* default: stretch */
}

See the Pen 6/11: Flexbox align-content example by Howard Dyer (@howarddyer) on CodePen.

Children properties (flex items)

order

Flex items are, by default, laid out in source order. This property can be used to redefine this for each individual flex item.

.flex-item {
    order: <number-with-no-unit>; /* default: 0 */
}

See the Pen 7/11: Flexbox order example by Howard Dyer (@howarddyer) on CodePen.

flex-basis

Defines the default size of an element along the main axis, before it is manipulated by other properties. The value given is a ratio, for example:

  • if all flex items have flex-basis: 1;, the space will be shared out evenly.
  • if all flex items have flex-basis: 1; except for one that has flex-basis: 2;, the latter will take up twice the amount of space of the former.
.flex-item {
    flex-basis: <number-with-unit> | auto; /* default: auto */
}

See the Pen 8/11: Flexbox flex-basis example by Howard Dyer (@howarddyer) on CodePen.

flex-grow

Defines the extent of the flex item’s ability to grow. This property controls how free space can be occupied by flex items, when the entirety of the main axis is not filled.

.flex-item {
    flex-grow: <number-with-no-unit>; /* default: 0 */
}

See the Pen 9/11: Flexbox grow example by Howard Dyer (@howarddyer) on CodePen.

flex-shrink

Defines the extent of the flex item’s ability to shrink. This property comes into play when the container is too small to contain the flex items.

.flex-item {
    flex-shrink: <number-with-no-unit>; /* default: 1 */
}

See the Pen 10/11: Flexbox shrink example by Howard Dyer (@howarddyer) on CodePen.

flex

Shorthand for flex-grow, flex-shrink and flex-basis.

.flex-item {
    flex: none | <'flex-grow'> <'flex-shrink'> || <'flex-basis'>; /* default: 0 1 auto */
}

align-self

This property mirrors the behaviour of the flex container’s align-content property, but can be used to override individual flex items.

.flex-item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch; /* default: auto */
}

See the Pen 11/11: Flexbox align-self example by Howard Dyer (@howarddyer) on CodePen.

Back to top Back to Home