CSS Flex Items
Control individual flex item behavior and sizing
🎯 What are Flex Items?
Flex items are the direct children of a flex container. Each item can have individual properties that control how it grows, shrinks, and aligns within the container.
/* Flex item properties */
.item {
flex: 1; /* Grow to fill space */
align-self: center; /* Individual alignment */
order: 2; /* Change display order */
}
Visual Result:
Flex Item Properties
flex-grow
How much an item should grow
flex-grow: 1;
flex-grow: 2;flex-shrink
How much an item should shrink
flex-shrink: 1;
flex-shrink: 0;flex-basis
Initial size before growing/shrinking
flex-basis: 200px;
flex-basis: auto;align-self
Individual item alignment
align-self: center;
align-self: flex-end;🔹 flex-grow Examples
The flex-grow property defines how a flex item grows relative to siblings when extra space exists. Its unitless number acts as a proportion; default is 0 (no growth). If one item has flex-grow: 2 and another 1, the first takes twice the extra space. Essential for fluid layouts where main content should expand more than sidebars, using space efficiently across devices.
🔸 Equal Growth
.item {
flex-grow: 1; /* All items grow equally */
}Output:
🔸 Different Growth Rates
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* Grows twice as much */
.item3 { flex-grow: 1; }Output:
🔹 flex Shorthand Property
The flex shorthand combines flex-grow, flex-shrink, and flex-basis. Syntax: flex: grow shrink basis;. Common values: flex: 1 (1 1 0), flex: 0 auto (default, 0 1 auto), flex: none (0 0 auto). Using shorthand ensures brevity and prevents default overrides, providing precise control over item flexibility within dynamic containers.
🔸 Common flex Values
/* flex: grow shrink basis */
.item1 { flex: 1; } /* flex: 1 1 0% */
.item2 { flex: 2; } /* flex: 2 1 0% */
.item3 { flex: 0 0 200px; } /* Don't grow/shrink, 200px wide */Output:
🔹 align-self Examples
The align-self property overrides the container's align-items for an individual flex item. Values: auto, flex-start, flex-end, center, baseline, stretch. Essential for fine-tuning alignment in heterogeneous layouts—e.g., aligning one button to the bottom in a row of icons. Works on the cross axis, offering pixel-perfect control without extra wrappers.
.container {
display: flex;
align-items: flex-start; /* Default alignment */
height: 120px;
}
.item2 { align-self: center; }
.item3 { align-self: flex-end; }Output:
🔹 order Property
The order property controls the visual order of flex items independently of HTML source order. Items layout in ascending order value (default 0). Powerful for responsive design, like moving a sidebar top on mobile. Note: it only affects visual rendering; DOM order remains for accessibility tools. Use for visual reordering, not logical restructuring.
<!-- HTML order -->
<div class="item1">First in HTML</div>
<div class="item2">Second in HTML</div>
<div class="item3">Third in HTML</div>/* CSS order */
.item1 { order: 3; } /* Appears last */
.item2 { order: 1; } /* Appears first */
.item3 { order: 2; } /* Appears middle */Output (Visual Order):
🔹 Real-World Example: Sidebar Layout
A flexible sidebar layout uses flexbox for responsive main content with an adjacent sidebar. Container: display: flex; flex-wrap: wrap;. Main: flex: 1; sidebar: flex-basis: 250px. Media queries can change flex-direction to column on small screens. Semantic <main> and <aside> tags benefit SEO and accessibility, optimizing screen real estate.
<!-- HTML -->
<div class="layout">
<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content Area</main>
<aside class="ads">Ads</aside>
</div>/* CSS */
.layout {
display: flex;
min-height: 200px;
gap: 1rem;
}
.sidebar {
flex: 0 0 200px; /* Fixed 200px width */
background: #f8f9fa;
padding: 1rem;
}
.content {
flex: 1; /* Takes remaining space */
background: #ffffff;
padding: 1rem;
border: 1px solid #dee2e6;
}
.ads {
flex: 0 0 150px; /* Fixed 150px width */
background: #f8f9fa;
padding: 1rem;
}