二零二六年之CSS布局：Flexbox、Grid及其应用之辨（二零二六年）
勿以边距与浮动而臆断。此乃现代CSS布局之实然。
其演进
1990s: Table layouts (don't ask)
2000s: Float-based layouts (clearfix hacks everywhere)
2010s: Flexbox (one-dimensional layout savior)
2020s: Grid (two-dimensional layout done right)
2026: Flexbox + Grid + Container Queries = complete toolkit
简明抉择指南
Need to lay out items in ONE direction?
→ Use FLEXBOX (row or column)
Need to lay out items in TWO directions (rows AND columns)?
→ Use GRID
Need a component that adapts to its container size?
→ Use CONTAINER QUERIES + Grid/Flexbox
Simple centering?
→ Either works (Flexbox is shorter)
柔性布局深入浅出
核心之理
/* Flexbox = one-dimensional layout */
/* Items flow in either a ROW or a COLUMN */
.container {
display: flex;
/* Main axis: horizontal by default */
/* Cross axis: perpendicular to main axis */
}
方向 & 缠绕
.container {
display: flex;
/* Main axis direction */
flex-direction: row; /* left → right (default) */
flex-direction: row-reverse; /* right → left */
flex-direction: column; /* top → bottom */
flex-direction: column-reverse;/* bottom → top */
/* Wrapping behavior */
flex-wrap: nowrap; /* single line, shrink if needed (default) */
flex-wrap: wrap; /* multi-line, flows to next line */
flex-wrap: wrap-reverse; /* wraps in reverse order */
}
/* Shorthand */
flex-flow: row wrap; /* direction + wrap together */
对齐（此乃多数人困顿之处）
.container {
display: flex;
/* MAIN AXIS alignment (justify) */
justify-content: flex-start; /* pack to start (default) */
justify-content: flex-end; /* pack to end */
justify-content: center; /* center horizontally */
justify-content: space-between; /* equal space BETWEEN items */
justify-content: space-around; /* equal space AROUND items */
justify-content: space-evenly; /* exactly equal space everywhere */
/* CROSS AXIS alignment (align) — controls the OTHER dimension */
align-items: stretch; /* stretch to fill (default) */
align-items: flex-start; /* align to cross-axis start */
align-items: flex-end; /* align to cross-axis end */
align-items: center; /* center vertically */
align-items: baseline; /* align text baselines */
}
/* Visual reference:
justify-content (main axis →):
┌─────────────────────────────┐
│ [item] [item] [item] │ space-between
│ [item] [item] [item] [item]│ space-evenly
│ [item] [item] │ center
align-items (cross axis ↓):
┌──┐
│ │ item flex-start
├──┤
│ │ item center
├──┤
│ │ item flex-end
└──┘
*/
项目级控制
.item {
/* How much can this item grow? */
flex-grow: 0; /* don't grow (default) */
flex-grow: 1; /* grow equally with siblings */
flex-grow: 2; /* grow 2x as much as flex-grow:1 siblings */
/* How much can this item shrink? */
flex-shrink: 1; /* shrink equally (default) */
flex-shrink: 0; /* never shrink (important for icons/buttons!) */
/* Base size before growing/shrinking */
flex-basis: auto; /* use content size (default) */
flex-basis: 200px; /* start at 200px */
flex-basis: 0; /* start at 0 (useful for equal-width items) */
/* Override container's align-items for this specific item */
align-self: center; /* this item centers itself */
align-self: flex-start; /* this item sticks to start */
}
/* Shorthand: grow | shrink | basis */
flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
flex: 0 0 auto; /* don't grow, don't shrink, use content size */
flex: 1 1 200px; /* grow, shrink, start at 200px */
/* THE magic trick: equal-width children */
.equal-children > * {
flex: 1;
}
真实世界 Flexbox 模式
/* Pattern 1: Perfect centering (the #1 use case) */
.center-all {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Pattern 2: Navbar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
}
.navbar > .logo { flex-shrink: 0; }
.navbar > .nav-links { display: flex; gap: 1rem; }
/* Pattern 3: Card with sticky footer */
.card {
display: flex;
flex-direction: column;
}
.card-body { flex: 1; } /* Takes all available space */
.card-footer { /* normal size, stays at bottom */ }
/* Pattern 4: Media object (avatar + text) */
.media-object {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.media-object > .avatar {
flex-shrink: 0; /* Avatar never squishes */
width: 48px;
height: 48px;
}
.media-object > .content { flex: 1; } /* Text takes rest */
/* Pattern 5: Form row */
.form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap; /* Responsive: wraps on small screens */
}
.form-row > * {
flex: 1 1 200px; /* Min 200px, grow equally */
}
/* Pattern 6: Loading spinner overlay */
.loading-overlay {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
}
CSS Grid 深入解析
核心概念
/* Grid = two-dimensional layout */
/* Define rows AND columns explicitly */
.container {
display: grid;
/* Define columns */
grid-template-columns: 200px 1fr 200px;
/* Define rows */
grid-template-rows: auto 1fr auto;
/* Gap between cells */
gap: 1rem;
}
機單位（變局之器）
/* fr = "fraction of available space" */
.grid-3-equal {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
}
.grid-sidebar {
display: grid;
grid-template-columns: 250px 1fr; /* Fixed sidebar + fluid content */
}
.grid-complex {
display: grid;
grid-template-columns: 200px 1fr 300px; /* Left nav + content + right panel */
grid-template-rows: 60px 1fr 40px; /* Header + main + footer */
}
/* repeat() saves typing */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 12-column grid system */
}
/* minmax() for responsive without media queries */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Automatically creates as many 250px+ columns as fit */
gap: 1rem;
}
置物之法
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
gap: 1rem;
}
/* Method 1: Auto-placement (items flow in order) */
.item { /* just place them, they'll fill cells */ }
/* Method 2: Line-based placement */
.header {
grid-column: 1 / -1; /* From column 1 to last column */
grid-row: 1 / 2;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4; /* Spans rows 2 and 3 */
}
.main {
grid-column: 2 / -1;
grid-row: 2 / 3;
}
/* Method 3: Named areas (most readable!) */
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"sidebar footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Method 4: span keyword */
.featured {
grid-column: span 2; /* Spans 2 columns */
grid-row: span 2; /* Spans 2 rows */
}
网格之對
.container {
display: grid;
/* Align content within grid area */
justify-items: start; /* horizontal alignment inside cell */
align-items: start; /* vertical alignment inside cell */
/* Values: start, end, center, stretch */
/* Align entire grid tracks when smaller than container */
justify-content: center; /* center the whole grid */
align-content: center;
/* Per-item override */
.specific-item {
justify-self: end;
align-self: center;
}
}
世间网格之式
/* Pattern 1: Holy Grail Layout */
.holy-grail {
display: grid;
grid-template:
"header header header" auto
"nav content aside" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
gap: 1rem;
}
/* Pattern 2: Card Grid (responsive) */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* No media queries needed! Cards reflow automatically */
/* Pattern 3: Dashboard */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.widget-wide { grid-column: span 2; }
.widget-tall { grid-row: span 2; }
/* Pattern 4: Image gallery (Masonry-like) */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 0.5rem;
}
.gallery img:nth-child(5n+1) { grid-row: span 2; } /* Some images taller */
/* Pattern 5: Form layout */
.form-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
}
.form-grid label { text-align: right; }
.form-grid .full-width { grid-column: span 2; }
/* Pattern 6: Feature comparison table */
.comparison-table {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 1px;
background: #e0e0e0; /* Gap color = border effect */
}
.comparison-table > * {
background: white;
padding: 1rem;
}
容器查询（2026必备）
/* Media queries: style based on VIEWPORT size */
/* Container queries: style based on CONTAINER size */
/* Define a container */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Style based on container width, not viewport! */
@container card (min-width: 400px) {
.card-inner {
display: grid;
grid-template-columns: 200px 1fr;
}
}
@container card (min-width: 600px) {
.card-inner {
grid-template-columns: 250px 1fr 150px;
}
}
/* This means your component looks great ANYWHERE:
In a sidebar, in a modal, in a grid cell, in full page.
The component adapts to its own space! */
何時用何物
| 布局所需 | 至善之器 |
|---|---|
| 居一物于中 | 弹性盒模型（简称） |
| 导航栏 | 弹性布局 |
| 卡片组件 | 弹性布局（列式） |
| 通篇布局 | 格网 |
| 仪表盘之面板 | 格网 |
| 相册 | 格网 |
| 形合 | 格(或流式布局) |
| 粘性页脚 | 柔布 |
| 等高列 | 柔布 (align-items: stretch) |
| 错综交叠 | 格网 (grid-area) |
| 随处适形之器 | 容器查询兼格网/柔布 |
常见谬误
/* ❌ Using margin: 0 auto for everything */
.center-old-school {
width: 80%;
margin: 0 auto; /* Only works with explicit width */
}
/* ✅ Modern centering */
.center-modern {
display: flex;
justify-content: center;
align-items: center;
}
/* ❌ Float-based layout */
.float-layout::after {
content: "";
clear: both;
display: table;
}
.left { float: left; }
.right { float: right; }
/* ✅ Don't use floats for layout in 2026 */
.flex-layout { display: flex; }
.grid-layout { display: grid; }
/* ❌ Fixed heights */
.sidebar { height: 500px; } /* Breaks on any content change */
/* ✅ Let content determine height */
.sidebar {
/* Just let it flow naturally */
overflow-y: auto; /* Scroll only if needed */
}
/* ❌ Negative margins for positioning */
.bad-positioning { margin-top: -50px; }
/* ✅ Use proper layout tools */
.good-positioning {
display: grid;
grid-row: 1 / 3; /* Overlap properly */
}
尔属Flexbox之队乎？Grid之队乎？抑或"视情况而定"？
从@armorbreak，得更多实用网页开发指南。