CSS Flexbox Advanced

Master flex-grow, flex-shrink, flex-basis, the flex shorthand, order, align-self, and flex-flow for precise flex item control.

Overview

Flexbox basics (display: flex, justify-content, align-items) cover most cases, but the real power of Flexbox lies in controlling individual items. **The flex shorthand** controls how items grow, shrink, and size themselves: ```css flex: grow shrink basis; flex: 1; /* = flex: 1 1 0% */ flex: 0 0 auto; /* = don't grow, don't shrink, size = content */ flex: 0 0 200px; /* = fixed 200px width */ ``` - **flex-grow**: how much the item grows relative to siblings when there's extra space - **flex-shrink**: how much the item shrinks when the container is too small - **flex-basis**: the item's initial main-size before growing/shrinking - **order**: visual reordering without changing HTML - **align-self**: overrides align-items for a single item

Key Points

•flex: 1 makes an item grow to fill all available space equally with siblings
•flex: 0 0 auto prevents growing and shrinking item sizes to its content
•flex-grow: 2 grows twice as fast as flex-grow: 1 siblings
•flex-basis: 0 vs auto: 0 ignores content size when distributing space; auto uses it
•order: 1 pushes an item to the end; order: -1 pulls it to the front
•align-self overrides align-items for one specific item
•flex-flow is shorthand for flex-direction + flex-wrap

Examples

flex shorthand values explained

/* flex: grow shrink basis */
.sidebar { flex: 0 0 260px; }   /* Fixed 260px, never grows or shrinks */
.main    { flex: 1;             /* Grows to fill remaining space */
           /* = flex: 1 1 0%   = shorthand expands to these values */ }

/* Equal-width columns */
.col { flex: 1; }

/* Two-to-one ratio */
.main   { flex: 2; }
.sidebar { flex: 1; }

flex: 1 with multiple siblings distributes the available space in the ratio of their flex-grow values.

align-self for individual cross-axis positioning

.flex-row {
  display: flex;
  align-items: stretch;  /* default: all items stretch */
  height: 200px;
}

.item-top    { align-self: flex-start; }
.item-center { align-self: center; }
.item-bottom { align-self: flex-end; }
.item-normal { align-self: auto; }  /* inherits from container */

order for visual reordering

.card-row {
  display: flex;
}

/* Move the featured card to the front */
.card-featured { order: -1; }

/* Push the "see all" link to the end */
.see-all-link { order: 999; }

/* Default order is 0 for all items */
/* Negative order = appears first */
/* Higher order = appears later */

order only changes visual order. Tab and reading order in the DOM is unchanged use with care for accessibility.

Common Mistakes

Confusing flex-basis: auto (uses width/content) vs flex-basis: 0 (ignores content width) flex: 1 uses basis 0 but flex: 1 1 auto uses basis auto
Expecting order to affect keyboard tab order order is purely visual; DOM order stays the same
Mixing flex-grow on some items but not others and being surprised by unequal distribution

Note

Use flex: 0 0 auto for icons and badges (never grow or shrink), flex: 1 for main content areas (take remaining space), and flex: 0 0 Xpx for fixed sidebars. This three-value pattern handles most layouts.

CSS Flexbox Advanced

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does "flex: 1" expand to in full shorthand form?