CSS布局的现代方案

CSS布局经历了从table布局、float布局到现代的Flexbox和Grid布局的演变。今天，我们拥有了前所未有的布局能力。本文将介绍几种主流的现代CSS布局方案。

📊 布局方案演进

• 1990s: Table布局（已过时）
• 2000s: Float + Clearfix
• 2010s: Flexbox（革命性变化）
• 2017+: CSS Grid（二维布局）
• 2020+: Subgrid、Container Queries等新特性

🎯 1. Flexbox（弹性盒子）

Flexbox是为一维布局设计的，非常适合处理行或列的排列。

核心概念

.container {
    display: flex;           /* 启用Flexbox */
    flex-direction: row;     /* 主轴方向：row | row-reverse | column | column-reverse */
    justify-content: center; /* 主轴对齐：flex-start | center | flex-end | space-between | space-around */
    align-items: center;     /* 交叉轴对齐：stretch | flex-start | center | flex-end | baseline */
    flex-wrap: wrap;         /* 是否换行：nowrap | wrap | wrap-reverse */
}

Flexbox示例

🔲 2. CSS Grid（网格布局）

Grid是专为二维布局设计的强大系统，可以同时控制行和列。

基础网格

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 三列等宽 */
    grid-template-rows: 100px auto;      /* 两行，第一行固定100px */
    gap: 20px;                          /* 行列间距 */
}

.item {
    grid-column: 1 / 3;  /* 跨越第1到第3列 */
    grid-row: 1;         /* 位于第1行 */
}

📱 3. 响应式布局技巧

媒体查询（Media Queries）

/* 移动端优先 */
.container { padding: 10px; }

/* 平板 */
@media (min-width: 768px) {
    .container { padding: 20px; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container { padding: 30px; }
}

现代单位：clamp()

h1 {
    /* 最小值16px，理想值4vw，最大值40px */
    font-size: clamp(16px, 4vw, 40px);
}

.container {
    /* 响应式宽度：最小300px，理想50%，最大800px */
    width: clamp(300px, 50%, 800px);
}

🎨 4. 实用布局模式

圣杯布局（Holy Grail）

经典的页头-三栏-页脚布局，现在可以用Grid轻松实现：

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

💡 选择建议

• 一维布局：Flexbox是首选
• 二维布局：Grid是最佳选择
• 对齐项目：Flexbox的align-items更简单
• 复杂网格：Grid的grid-template-areas更直观

现代CSS布局已经非常强大，大多数布局需求都可以用Flexbox和Grid的组合解决。掌握这两者，你将能够轻松创建任何复杂的布局。