A complete guide to Flexbox — Part 2

In Part 1 we covered container properties — the rules the parent sets for everyone. Now we flip to item properties: the per-child overrides that let one element grow, another shrink, and a third reorder itself without touching the HTML.

If you want to experiment as you read, the interactive Flexbox playground from part one is still the fastest way to see these properties move.

Item properties

These go on flex items — direct children of a flex container.

order

Changes visual order without reordering DOM. Default is 0; lower values appear first.

.item {
  order: 1;
}

flex-grow

Controls how much an item grows relative to siblings when free space exists. Default 0 (don’t grow).

.item-a {
  flex-grow: 1;
}

A value of 2 takes twice the extra space of a sibling with flex-grow: 1.

flex-shrink

Controls how much an item shrinks when space is tight. Default 1 (shrink proportionally). Set 0 to prevent shrinking.

.item {
  flex-shrink: 0; // won't shrink below its flex-basis
}

flex-basis

Sets the item’s initial size along the main axis before grow/shrink kicks in. Default auto (use content size).

.item {
  flex-basis: 200px;
}

Common values: length · percentage · auto (default) · min-content · max-content · fit-content

flex

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

.item {
  flex: 1;           // grow 1, shrink 1, basis 0%
  flex: 0 1 auto;    // default — don't grow, can shrink, size from content
  flex: 1 1 200px;   // [grow] [shrink] [basis]
}

flex: 1 is almost never what you think on the first read. It’s shorthand for 1 1 0%, not 1 1 auto.

The single-value flex: 1 pattern is the one you’ll use most — it makes items share space equally. But know that it sets flex-basis to 0%, which can collapse content-sized items unexpectedly.

align-self

Overrides the container’s align-items for a single item on the cross axis.

.container {
  display: flex;
  align-items: center;
}

.item-override {
  align-self: flex-end;
}

Values: auto (inherit from container) · stretch · flex-start · flex-end · center · baseline

If the container has align-content set and items wrap to multiple lines, align-self on individual items can be overridden by the container’s line alignment.

Putting it together

Container properties set the rules of the game. Item properties let individual children bend those rules.

Wrapping up

Between Part 1 (container) and this post (items), you have the full Flexbox property set. The concepts layer cleanly: pick an axis with flex-direction, distribute space with justify-content and align-items, then fine-tune individual children with flex and align-self.

Keep the playground open next time a layout fights you — watching a property change in isolation is still the fastest way to build muscle memory.