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:
; }

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:
; /* 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:
; /* 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:
| 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.