Smart resizing container

flexbox

Define a container that has elements which adjust their size according to the amount of space available.

Properties used with flexbox containers:

flex-flow
flex-direction
flex-wrap
justify-content
align-content
align-items

Properties used with flexbox elements:

flex
flex-basis
flex-grow
flex-shrink
align-self

flex-flow

Direction + wrap

This property sets both the flex-direction and the flex-wrap properties.

css, style, flexbox, flex-flow

flex-direction

Left, right, up, down

Define the layout direction for a flexible container's elements.

css, style, flexbox, flex-direction

flex-wrap

To wrap or not to wrap

Specify whether or not the elements of this flexible container should wrap when they don't fit within the container.

css, style, flexbox, flex-wrap

justify-content

Justify elements within a flexbox

Use this property to justify the elements of a flexbox container when there is extra space available.

css, style, flexbox, justify-content

align-content

Align elements within a flexbox

Use this property to align the elements of a flexbox container — in the orthogonal direction — when there is extra space available.

css, style, flexbox, align-content

align-items

Align elements of a line

This property specifies the alignment of elements within a flexbox container on a row-by-row basis.

css, style, flexbox, align-items

align-self

Override the container's setting

This property sets the alignment of a single element within a flexbox container.

css, style, flexbox, align-self

flex

Grow, shrink, basis

This property sets the flexbox properties for flex-grow, flex-shrink and flex-basis.

css, style, flexbox, flex

flex-basis

Can you say 'width'?

The flex-basis property is the desired size of an element before it grows or shrinks to fit within its container.

css, style, flexbox, flex-basis

flex-grow

Dole out the left-over space

Specifies how much of the container's left-over space should be given to this element.

css, style, flexbox, flex-grow

flex-shrink

Donate space back to the container

Specifies how much of this element's space may be given back to the container when there isn't enough for all of the elements.

css, style, flexbox, flex-shrink