Flex Items

Learn the most important flex item properties: order, flex-grow, flex-shrink, flex-basis, the flex shorthand, and align-self.

On this page

Flex items are the direct children of a flex container. Flexbox lets you control how each item grows, shrinks, and aligns.

.container {
  display: flex;
  gap: 12px;
}

Most item-level control comes from these properties:

Order

order changes the visual order of items without changing the HTML order. Default is 0.

.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }

Tip: Use order carefully. For accessibility and keyboard navigation, the DOM order still matters.

flex-grow defines how much free space an item takes relative to others. Default is 0 (no growing).

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }
.item-3 { flex-grow: 1; }

In this example, item-2 gets twice the extra space compared to item-1 and item-3.

flex-shrink defines how items shrink when there is not enough space. Default is 1 (items can shrink).

.item-fixed {
  flex-shrink: 0; /* do not shrink */
}

This is useful for icons, buttons, or fixed-size side elements that should never compress.

flex-basis sets the initial size of an item before remaining space is distributed. It can be a length or a percentage.

.card {
  flex-basis: 240px;
}

Tip: flex-basis often works better than width in a flex layout because it participates in flex calculations.

The flex shorthand is the most common way to size flex items:

/* flex: grow shrink basis; */
.item { flex: 1 1 240px; }

Very common patterns:

flex: 1 – shorthand for “grow to fill” (browser treats it like 1 1 0 in most cases)
flex: 0 0 auto – do not grow, do not shrink
flex: 1 1 240px – responsive cards with a minimum-like base

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.row .card {
  flex: 1 1 260px;
}

align-self overrides align-items for one specific item (cross-axis alignment).

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

.item-top {
  align-self: flex-start;
}

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