在现代 CSS 中，我们有两个强大的布局工具：Flexbox 和 CSS Grid。虽然它们有一些重叠的功能，但每个都有其独特的优势和适用场景。
Flexbox 专为一维布局设计，无论是水平还是垂直方向。
.flex-container {
display: flex;
flex-direction: row; /* 或 column */
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.flexible-items {
display: flex;
gap: 1rem;
}
.flexible-items > * {
flex: 1; /* 等分空间 */
}
CSS Grid 为二维布局而生，可以同时控制行和列。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.full-width {
grid-column: 1 / -1;
}
Flexbox 方案（推荐）：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
Grid 方案（过度设计）：
.navbar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 1rem;
}
Grid 方案（推荐）：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
Flexbox 方案（复杂）：
.cards {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.card {
flex: 1 1 280px;
}
在实际项目中，最佳实践是将两者结合使用：
/* Grid 用于页面整体布局 */
.page {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Flexbox 用于组件内部布局 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
两者都有良好的现代浏览器支持：
记住：工具本身没有好坏，关键是在正确的场景使用正确的工具！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。