CSS Tutorial
20 Topics- CSS Tutorial Overview
- CSS Introduction
- CSS Fundamentals
- CSS Selectors
- CSS Colors & Backgrounds
- CSS Text & Fonts
- CSS Box Model
- CSS Display & Positioning
- CSS Flexbox
- CSS Grid
- CSS Sizing & Layout
- CSS Lists & Tables
- CSS Transitions & Animations
- CSS Responsive Design
- CSS Advanced Styling
- CSS Functions
- CSS for Accessibility & Print
- CSS Architecture & Methodologies
- CSS Preprocessors & Tools
- CSS Modern & Experimental CSS
CSS Flexbox Layout Architecture
Master the 1-dimensional Flexible Box model: coordinate main and cross axes, distribute extra space with flex-grow, and align navigation interfaces with margin: auto.
1. The Core Flexbox Model: Main Axis vs. Cross Axis
Declaring display: flex activates the flex formatting context. Unlike conventional block layouts, Flexbox operates along two orthogonal axes:
- Main Axis: Primary direction along which flex items flow. By default, it runs horizontally (left to right in LTR).
- Cross Axis: Perpendicular to the main axis. By default, it runs vertically (top to bottom).
Axis Switching Rule: When you set
flex-direction: column, the Main Axis becomes vertical (top to bottom), and the Cross Axis becomes horizontal! This means justify-content now controls vertical alignment and align-items controls horizontal alignment.CSS Example
/* Flex container demonstration */
.flex-nav {
display: flex;
align-items: center;
justify-content: space-between;
background: #1e293b;
color: white;
padding: 12px 20px;
border-radius: 8px;
}
.nav-links {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}2. Alignment Properties: justify-content & align-items
| Property | Axis Controlled | Available Keywords | Primary Use Case |
|---|---|---|---|
justify-content | Main Axis | flex-start, center, flex-end, space-between, space-around, space-evenly | Distributing horizontal space between buttons, cards, or nav links. |
align-items | Cross Axis | stretch (default), center, flex-start, flex-end, baseline | Vertically centering text icons, aligning items by baseline. |
align-content | Cross Axis (Multi-line) | flex-start, center, space-between, stretch | Spacing between wrapped lines when flex-wrap: wrap is active. |
CSS Example
/* Perfect vertical & horizontal centering */
.perfect-center-box {
display: flex;
justify-content: center; /* Main axis center */
align-items: center; /* Cross axis center */
height: 120px;
background: #ecfeff;
border: 2px dashed #06b6d4;
border-radius: 8px;
}
.center-pill {
background: #0891b2;
color: white;
padding: 10px 24px;
border-radius: 20px;
font-weight: bold;
}3. Flex Item Sizing: flex-grow, flex-shrink & flex-basis
Flex item sizing is controlled by three interrelated properties, bundled in the flex shorthand:
/* The flex shorthand: flex-grow | flex-shrink | flex-basis */ flex: 1 1 0%;
flex-grow: Proportion of extra positive free space this item claims. If two items haveflex-grow: 1and one hasflex-grow: 2, the third receives twice as much leftover space.flex-shrink: Proportion of negative overflow this item absorbs when container space is restricted.flex-basis: The starting size of the item before space is distributed (e.g.200px,auto, or0).
CSS Example
/* Search bar expanding with flex-grow */
.search-container {
display: flex;
gap: 10px;
background: #f8fafc;
padding: 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.search-input {
flex: 1; /* Absorbs all remaining row space */
padding: 8px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
.search-btn {
flex: 0 0 auto; /* Keeps intrinsic button width without shrinking */
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: bold;
}4. The margin: auto Superpower in Flexbox
In Flexbox, margin: auto behaves unlike anywhere else in CSS: it eagerly absorbs all available free space along that specific margin edge!
Setting margin-left: auto on an item pushes it (and any following items) all the way to the right end of the flex container:
CSS Example
/* Pushing user profile to right using margin-left: auto */
.toolbar {
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
padding: 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.user-profile {
margin-left: auto; /* Magic push to right edge! */
background: #e0e7ff;
color: #3730a3;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
}5. Frequently Asked Questions (FAQ)
Flex items default to
min-width: auto, which prevents an item from shrinking narrower than its content (such as an un-breakable long URL). To allow flex items to shrink below their text length and wrap properly, set min-width: 0 on the flex child.center centers items based on their physical geometric bounding box. baseline aligns items so that the typographic baselines of their text glyphs sit on the exact same horizontal line, which is crucial when pairing large headings with small captions or icons.Historically, adding margins to flex items caused extra space on the first or last item, requiring
:not(:last-child) pseudo-class hacks. The native gap property places space strictly between items, leaving outer edges clean and naturally handling multi-line wrapping.Explore Related Tools
Hand-picked utilities and calculators related to this tool.
