Smart resizing container


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


Direction + wrap

This property sets both the flex-direction and the flex-wrap properties.
css, style, flexbox, flex-flow


Left, right, up, down

Define the layout direction for a flexible container's elements.
css, style, flexbox, flex-direction


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 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 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 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


Override the container's setting

This property sets the alignment of a single element within a flexbox container.
css, style, flexbox, align-self


Grow, shrink, basis

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


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


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


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

style > flexbox Smart resizing container

🔗 🔎