Flex 与 Grid

这一课你将能做到

1. 用 Flex 写出水平垂直居中、自适应导航、卡片列表
2. 用 Grid 写出多列网格、圣杯布局
3. 知道什么场景用 Flex、什么场景用 Grid

为什么要学

Flex 和 Grid 是现代 CSS 布局的两大支柱。在它们出现之前，居中一个 div 都是难题，要写各种 hack。现在两横一纵三行代码搞定。Flex 擅长一维（一行或一列），Grid 擅长二维（行和列同时控）。

人话：Flex 像把东西摆在一条传送带上——只管一个方向的排列；Grid 像 Excel 表格——行和列同时布局。

先建立图像

<style>
    .flex {
        display: flex;
        justify-content: space-between;  /* 主轴均分 */
        align-items: center;             /* 交叉轴居中 */
        background: #f0f0f0;
        padding: 10px;
    }
    .flex > div { background: tomato; color: #fff; padding: 10px 20px; }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);  /* 3 列等分 */
        gap: 10px;
        margin-top: 20px;
    }
    .grid > div { background: skyblue; padding: 20px; }
</style>

<div class="flex">
    <div>A</div><div>B</div><div>C</div>
</div>

<div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
</div>

跟着做

步骤 1：Flex 容器属性

.container {
    display: flex;
    flex-direction: row;             /* 主轴方向：row / row-reverse / column / column-reverse */
    flex-wrap: nowrap;               /* 换行：nowrap / wrap / wrap-reverse */
    justify-content: flex-start;     /* 主轴对齐：flex-start / center / flex-end / space-between / space-around / space-evenly */
    align-items: stretch;            /* 交叉轴对齐：stretch / flex-start / center / flex-end / baseline */
    gap: 16px;                       /* 项目间距 */
}

最常用组合：

/* 水平垂直居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两端对齐 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

步骤 2：Flex 项目属性

.item {
    flex-grow: 0;       /* 多余空间是否放大：默认 0 */
    flex-shrink: 1;     /* 空间不足是否缩小：默认 1 */
    flex-basis: auto;   /* 基准大小 */

    /* 简写：flex: grow shrink basis */
    flex: 1;            /* 等价于 1 1 0%，常用！均分剩余空间 */
    flex: 0 0 200px;    /* 固定 200px，不放大不缩小 */

    align-self: center; /* 单个项目覆盖 align-items */
    order: 2;           /* 排序，越小越靠前 */
}

实战：左侧固定 200px、右侧自适应的两栏：

.page { display: flex; }
.side { flex: 0 0 200px; background: #eee; }
.main { flex: 1; }