Flexbox Child Properties: order, flex‑grow, flex‑shrink, flex‑basis, flex, and align‑self

To use Flexbox you first set the parent container's display to flex or inline‑flex. Once the parent is a Flex container, the child items can be controlled with six specific properties.

1. order

The order property determines the visual order of a flex item; lower numbers appear earlier. The default is 0 and negative values are allowed.

<div class="container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.container { display: flex; }
.flex-item { order: <integer>; }

2. flex‑grow

flex‑grow

defines how much a flex item will expand to fill remaining space. The default is 0, meaning the item will not grow even if free space exists.

.container { display: flex; }
.flex-item { flex‑grow: <number>; /* default 0 */ }

If every item has flex‑grow: 1, they share the leftover space equally. If one item has flex‑grow: 2 while the others have 1, that item receives twice the extra space.

3. flex‑shrink

flex‑shrink

controls how much an item shrinks when the container is too small. The default is 1, so items shrink proportionally. Setting it to 0 prevents the item from shrinking.

.container { display: flex; }
.flex-item { flex‑shrink: <number>; /* default 1 */ }

4. flex‑basis

flex‑basis

sets the initial main‑axis size of a flex item before free space is distributed. Its default is auto, which uses the item's intrinsic size. It can also accept any width / height value (e.g., 100px).

.container { display: flex; }
.flex-item { flex‑basis: <length> | auto; /* default auto */ }

5. flex (shorthand)

The flex property is a shorthand for flex‑grow, flex‑shrink, and flex‑basis. Its default value is 0 1 auto. Two common shortcuts are auto (equivalent to 1 1 auto) and none (equivalent to 0 0 auto).

.container { display: flex; }
.flex-item { flex: none | [ <'flex‑grow'> <'flex‑shrink'>? || <'flex‑basis'> ]; /* default 0 1 auto */ }

6. align‑self

align‑self

allows an individual flex item to override the container's align‑items setting. Its default is auto, which inherits the parent’s alignment; other possible values are flex‑start, flex‑end, center, baseline, and stretch.

.container { display: flex; }
.flex-item { align‑self: auto | flex‑start | flex‑end | center | baseline | stretch; }

These six properties give fine‑grained control over how flex items are ordered, sized, and aligned within a Flexbox layout.