Flex Items

Flex Items

Per-item knobs: grow, shrink, order, for each child!

flex-grow

How much a child grows to fill space:

.item {
  flex-grow: 1;    /* share extra space */
}

flex-grow: 2 takes twice as much extra space as flex-grow: 1.

flex-basis

The starting size BEFORE growing/shrinking.

.item {
  flex-basis: 100px;   /* idle width */
}

flex-shrink

How fast it gives up width when space is tight. flex-shrink: 0 never shrinks.

The shorthand: flex

flex: grow shrink basis:

.item {
  flex: 1;            /* grow 1, shrink 1, basis 0 */
  flex: 1 1 200px;    /* grow shrink basis */
  flex: 0 0 auto;     /* natural width, no grow/shrink */
}

align-self

Override align-items for ONE item:

.item {
  align-self: flex-end;   /* only this one to the end */
}

order

Rearrange items without touching HTML:

.item {
  order: 2;    /* default 0; smaller = earlier */
}

TL;DR

• flex-grow: share extra space.
• flex-shrink: give up space when tight.
• flex-basis: starting size.
• flex: grow shrink basis shorthand.
• align-self: one-item override.
• order: reorder visually.