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.
.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 */order and align-self
Reordering items and overriding alignment for a single item.
.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 */
}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
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.Grid Alignment: place-items, place-content
Grid alignment properties control how content is positioned within grid cells and how the grid itself is positioned within its container. justify-items/align-items control individual item alignment along each axis, and their shorthand place-items sets both at once. justify-content/align-content position the whole grid when it is smaller than its container, with place-content as their shorthand.
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.Grid Alignment: place-items, place-content
Grid alignment properties control how content is positioned within grid cells and how the grid itself is positioned within its container. justify-items/align-items control individual item alignment along each axis, and their shorthand place-items sets both at once. justify-content/align-content position the whole grid when it is smaller than its container, with place-content as their shorthand.