Codectionary / Developer documentation / CSS

Flex Item Properties

While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.

Syntax

flex: grow shrink basis;
order: number;
align-self: auto | flex-start | center | flex-end;

Examples

The flex Shorthand

Controlling how items grow and shrink relative to each other.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}.preview-flex{display:flex;gap:1rem;margin-block:1rem;overflow:auto}

.sidebar { flex: 0 0 250px; }  /* never grow, never shrink, fixed 250px base */
.main    { flex: 1; }           /* grow to fill all remaining space, shorthand for 1 1 0% */
.card    { flex: 1 1 200px; }   /* grow and shrink, starting from a 200px base size */
  1. The first row compares a fixed flex basis with a flexible main region.
  2. The second row applies the card flex rule to two comparable items.
  3. Resize the preview to see which items grow and which remain constrained.
HTML used by this example
<div class="preview-flex"><aside class="sidebar preview-tile">Fixed basis: 250px</aside><main class="main preview-tile">Flexible main area</main></div><div class="preview-flex"><div class="card preview-tile">Card one</div><div class="card preview-tile">Card two</div></div>

order and align-self

Reordering items and overriding alignment for a single item.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}.preview-flex{display:flex;align-items:flex-start;gap:1rem;min-height:12rem}

.item-a { order: 2; } /* moves visually after items with a lower order value */
.item-b { order: 1; } /* default order is 0 for all items */

.featured {
  align-self: center; /* overrides the container's align-items just for this item */
}
  1. The order rules change visual placement while the HTML sequence stays A then B then featured.
  2. align-self changes the featured item’s cross-axis alignment.
  3. Keep meaningful reading and keyboard order in the DOM rather than using order to repair it.
HTML used by this example
<div class="preview-flex"><div class="item-a preview-tile">A: order 2</div><div class="item-b preview-tile">B: order 1</div><div class="featured preview-tile">Featured: align-self</div></div>

Parameters and values

  • flex-grow (number): How much an item grows relative to siblings when there is extra space
  • flex-shrink (number): How much an item shrinks relative to siblings when space is tight
  • flex-basis (length | auto): The item's starting size before growing/shrinking is applied
  • order (number): Controls visual order independent of source order (default 0)
  • align-self (auto | flex-start | center | flex-end | stretch): Overrides align-items for a single item

Best practices

  • Use the flex shorthand (flex: 1) rather than setting flex-grow, flex-shrink, and flex-basis separately, for more concise and standard code
  • Use flex: 1 for items that should grow equally to fill space, and flex: 0 0 <size> for items that should stay a fixed size
  • Use order sparingly and only for visual reordering - it does not change the underlying DOM order, which can confuse keyboard and screen reader navigation
  • Reach for align-self only when one specific item needs different alignment than the rest of the flex items

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading