CSS网页布局大师班：Flexbox、Grid与高级模式详解

🚀1. 导论：CSS布局的演进与核心概念

网页布局是前端开发的核心任务之一，它决定了内容在浏览器窗口中的呈现方式。CSS布局技术从简单的块级/行内元素堆叠，逐步演化到能应对复杂响应式需求的现代布局系统。

💡 为什么现代布局技术如此重要？

灵活性： 能够应对内容动态变化和不确定性。
响应式支持： 在桌面、平板和手机等多种设备上提供一致且优化的体验。
开发效率： 简化复杂布局的实现，减少CSS代码量。
可维护性： 结构清晰，易于团队协作和长期维护。
性能： 减少不必要的DOM操作和回流重绘。

📏 盒子模型 (Box Model) 核心

CSS中的每一个元素都被视为一个矩形的盒子，它由内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)组成。

Margin (外边距)

Border (边框)

Padding (内边距)

Content (内容)

标准盒子模型下，元素的 width 和 height 只包含 content 区域。而 box-sizing: border-box; 会将 padding 和 border 也计算在 width 和 height 内，这在多数现代布局中更易于管理。

/* 推荐使用，布局更直观 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

🏗️2. 传统布局方法：理解其局限性

在Flexbox和Grid普及之前，开发者们依赖一些较为原始但有效的技术。了解它们的原理和局限性，能更好地体会现代布局的优越性。

📜 文档流 (Normal Flow)

这是浏览器默认的元素排列方式：块级元素独占一行垂直堆叠，行内元素从左到右水平排列。

块级元素 A

块级元素 B

块级元素 C

🏊 浮动布局 (Floats)

浮动使元素脱离文档流，向左或向右浮动。曾是实现多列布局的主要方式，但需要“清除浮动”来防止父元素高度塌陷。

HTML结构

<div class="float-container relative border border-gray-400 p-4 rounded-lg">
    <div class="float-item float-left w-2/5 p-4 bg-orange-200 rounded">左侧栏</div>
    <div class="float-item float-right w-2/5 p-4 bg-purple-200 rounded">右侧栏</div>
    <div class="clearfix clear-both"></div> <!-- 清除浮动元素 -->
</div>

CSS示例（Tailwind类）

/* 注：`float-left`, `float-right`, `clear-both`为Tailwind类 */
<div class="float-container">
    <div class="float-item float-left w-2/5">...</div>
    <div class="float-item float-right w-2/5">...</div>
    <div class="clear-both"></div>
</div>

左侧栏 Content

右侧栏 Content

(模拟浮动布局，需清除浮动避免父级高度塌陷)

局限性： 浮动不是为布局而生，常导致父元素高度塌陷，需要额外清除浮动。难以实现垂直居中，且对圣杯/双飞翼等复杂布局实现起来非常 hacky。

📍 定位 (Positioning)

通过 position 属性（relative, absolute, fixed, sticky）精确控制元素的放置。

HTML结构

<div class="relative w-72 h-40 border-2 border-gray-400 p-4 rounded-lg">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-20 bg-red-300 rounded flex items-center justify-center">
        绝对定位<br>子元素
    </div>
</div>

CSS示例（Tailwind类）

/* 示例直接使用Tailwind CSS类 */
<div class="relative ...">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ...">...</div>
</div>

绝对元素

局限性： 元素脱离文档流，可能导致元素重叠。适用于少量元素的精确位置调整，不适合整体页面结构布局。

📊 表格布局 (Tables)

早期常用 <table> 标签进行布局。

局限性： 语义化差（表格用于展示数据而非布局），代码冗余，不利于SEO，响应式实现困难。

➡️3. Flexbox (弹性盒子)：一维布局的艺术

Flexbox，全称“弹性盒子布局模块”，它提供了一种强大的方式来在一个维度（行或列）上对容器中的项目进行排列、对齐和分配空间。

✅ 核心概念：容器与项目

Flex容器 (Flex Container)： 对其设置 display: flex; 或 display: inline-flex; 的元素。
Flex项目 (Flex Items)： Flex容器的直接子元素。
主轴 (Main Axis)： Flex项目排列的方向，由 flex-direction 决定。
交叉轴 (Cross Axis)： 垂直于主轴的方向。

Flex容器 (Main Axis ↔️, Cross Axis ↕️)

项目1

项目2

项目3

🔧 Flex容器常用属性详解

这些属性控制Flex容器的整体行为和其内部Flex项目的布局。

1. `flex-direction` (主轴方向)

定义主轴的方向（即项目排列的方向）。

<!-- Tailwind Classes -->
<div class="flex flex-row">...</div>    <!-- 默认，从左到右 -->
<div class="flex flex-row-reverse">...</div> <!-- 从右到左 -->
<div class="flex flex-col">...</div>    <!-- 从上到下 -->
<div class="flex flex-col-reverse">...</div> <!-- 从下到上 -->

1

2

3

flex-row 示例

2. `justify-content` (主轴对齐)

项目在主轴上的对齐方式。

<!-- Tailwind Classes -->
<div class="flex justify-start">...</div>   <!-- 默认 -->
<div class="flex justify-end">...</div>
<div class="flex justify-center">...</div>
<div class="flex justify-between">...</div> <!-- 两端对齐，中间分散 -->
<div class="flex justify-around">...</div> <!-- 项目两侧有等距空间 -->
<div class="flex justify-evenly">...</div> <!-- 项目之间及两端等距 -->

A

B

C

justify-center 示例

3. `align-items` (交叉轴对齐)

项目在交叉轴上的对齐方式。

<!-- Tailwind Classes -->
<div class="flex items-stretch">...</div>   <!-- 默认，占满容器 -->
<div class="flex items-start">...</div>
<div class="flex items-end">...</div>
<div class="flex items-center">...</div>
<div class="flex items-baseline">...</div> <!-- 基线对齐 -->

A

B

C

align-items: center 示例

4. `flex-wrap` (项目换行)

当一行排不下所有项目时，是否允许换行。

<!-- Tailwind Classes -->
<div class="flex flex-nowrap">...</div> <!-- 默认，不换行，可能溢出 -->
<div class="flex flex-wrap">...</div>   <!-- 换行，从左到右，从上到下 -->
<div class="flex flex-wrap-reverse">...</div> <!-- 换行，从左到右，从下到上 -->

1

2

3

4

5

flex-wrap 示例 (尝试缩小浏览器查看效果)

5. `gap` (简写 `grid-gap`)

项目之间的间距。

<div class="flex gap-4">...</div> <!-- 行列间距都是16px -->
<div class="flex gap-x-4 gap-y-2">...</div> <!-- 水平16px，垂直8px -->

Item 1

Item 2

Item 3

Item 4

gap-4 示例

🔗 Flex项目常用属性详解

这些属性控制Flex项目如何在Flex容器中表现。

1. `flex-grow` (放大比例)

定义项目的放大比例，当Flex容器有多余空间时，项目如何瓜分这些空间。默认 0 (不放大)。

<div class="flex">
    <div class="flex-grow bg-blue-200">Grow 1</div>
    <div class="flex-grow-0 bg-green-200">Grow 0</div>
    <div class="flex-grow-[2] bg-yellow-200">Grow 2</div> <!-- Tailwind JIT语法 -->
</div>

Grow 1

定宽

Grow 2

2. `flex-shrink` (缩小比例)

定义项目的缩小比例。当Flex容器空间不足时，项目如何缩小。默认 1 (会缩小)。0表示不缩小。

<div class="flex w-48 overflow-hidden"> <!-- 容器宽度小于项目总和 -->
    <div class="flex-shrink bg-blue-200 w-32">Shrink 1</div>
    <div class="flex-shrink-0 bg-green-200 w-32 ml-2">Shrink 0</div>
</div>

Shrink 1

Shrink 0

（尝试缩小浏览器，观察Shrink 0项目保持原宽度）

3. `flex-basis` (主轴基准值)

项目在分配多余空间或收缩之前，占据主轴的尺寸。默认 auto (与内容或宽度属性相关)。

<div class="flex">
    <div class="basis-1/3 bg-blue-200">1/3宽度</div>
    <div class="basis-[100px] bg-green-200">100px</div>
</div>

Basis 1/3

Basis 100px

4. `flex` (简写属性)

是 flex-grow, flex-shrink 和 flex-basis 的简写。常见值：

flex: 0 1 auto; (默认值)
flex: 1; (相当于 1 1 0%，项目等比放大/缩小，且初始宽度为0)
flex: auto; (相当于 1 1 auto;，项目等比放大/缩小，初始宽度为内容宽度)
flex: none; (相当于 0 0 auto;，项目不放大不缩小，初始宽度为内容宽度)

<div class="flex">
    <div class="flex-1 bg-blue-200">弹性项目</div>
    <div class="flex-none bg-green-200 w-32">固定项</div>
</div>

5. `align-self` (单个项目交叉轴对齐)

允许单个项目覆盖父容器的 align-items 设置，在交叉轴上进行对齐。

<div class="flex items-center h-32">
    <div class="self-start bg-blue-200 p-2">顶部对齐</div>
    <div class="self-center bg-green-200 p-2">居中对齐</div>
    <div class="self-end bg-yellow-200 p-2">底部对齐</div>
</div>

Top

Center

Bottom

💡 Flexbox实战场景

多列等高布局

Flexbox轻松实现多列内容等高。

<div class="flex items-stretch gap-4">
    <div class="flex-1 p-4 bg-blue-100 border border-blue-200">
        <h5>短内容标题</h5><p>短内容区...</p>
    </div>
    <div class="flex-1 p-4 bg-green-100 border border-green-200">
        <h5>长内容标题</h5><p>这里是较长的内容，可以看出来，它需要更多的空间。即便如此，与旁边的短内容区域仍然保持了相同的高度。</p>
    </div>
</div>

短内容标题

短内容区域。

长内容标题

这里是较长的内容，可以看出来，它需要更多的空间。即便如此，与旁边的短内容区域仍然保持了相同的高度。

Sticky Footer (粘性底部)

无论内容多少，底部始终紧贴页面底部，内容不足时填充空白。

<body class="flex flex-col min-h-screen">
    <header class="bg-blue-500 text-white p-4">头部</header>
    <main class="flex-grow bg-gray-100 p-4">主内容区</main>
    <footer class="bg-gray-800 text-white p-4">底部</footer>
</body>

头部

主内容区 (flex-grow)

（内容少时会拉伸）

底部

（此可视化效果无法完全模拟 min-h-screen，请自行尝试）

💎4. CSS Grid (网格布局)：二维布局的终极方案

CSS Grid Layout 是一种为Web设计的二维布局系统。它允许开发者通过定义行和列来创建复杂的响应式页面布局，将内容精确地放置在网格的任意位置。

✅ 核心概念：容器与项目

Grid容器 (Grid Container)： 对其设置 display: grid; 或 display: inline-grid; 的元素。
Grid项目 (Grid Items)： Grid容器的直接子元素。
网格线 (Grid Lines)： 构成网格的水平和垂直分隔线（可命名）。
网格轨道 (Grid Tracks)： 两条相邻网格线之间的空间，即行或列。
网格单元格 (Grid Cells)： 网格中的最小单位，行与列的交叉点。
网格区域 (Grid Areas)： 由一个或多个网格单元格组成的矩形区域（可命名）。

区域 A

区域 B

区域 C

区域 D (跨两列)

🔧 Grid容器常用属性详解

这些属性在Grid容器上定义网格结构。

1. `grid-template-columns` / `grid-template-rows`

定义网格的列数/行数及其各自的尺寸。

固定值： 200px 1fr 100px
fr 单位： 弹性单位，表示可用空间的分数。
repeat()： 简化重复轨道定义，如 repeat(3, 1fr) (三等分)。
minmax()： 设置尺寸范围，如 minmax(100px, 1fr) (最小100px，最大占满剩余空间)。
auto-fill / auto-fit： 配合 repeat() 实现弹性列数/行数。

<!-- Tailwind Classes -->
<div class="grid grid-cols-3"> <!-- 三等分列 -->
<div class="grid grid-cols-[1fr_2fr_1fr]">
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))]"> <!-- 响应式列 -->

1fr

2. `gap` (简写 `column-gap` / `row-gap`)

定义网格单元格之间的间距。

<div class="grid gap-4"> <!-- 行列间距均为16px -->
<div class="grid grid-cols-2 gap-x-6 gap-y-3"> <!-- 水平24px，垂直12px -->

Item 1

Item 2

Item 3

Item 4

3. `grid-template-areas` (命名网格区域)

使用预定义的名称布局网格项目，极大地提高了可读性和维护性。

<!-- HTML -->
<div class="grid" style="
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        'header header'
        'sidebar content'
        'sidebar footer'
  ">
    <header class="grid-area-[header]">Header</header>
    <nav class="grid-area-[sidebar]">Sidebar</nav>
    <main class="grid-area-[content]">Main Content</main>
    <footer class="grid-area-[footer]">Footer</footer>
</div>

Header

Sidebar

Main Content

Footer

🔗 Grid项目常用属性详解

这些属性控制Grid项目在Grid容器中的位置和跨度。

1. `grid-column` / `grid-row`

定义项目在网格中的起始和结束线。

数字： 基于网格线编号，如 grid-column: 1 / 3; (从线1到线3，跨两列)。
span 关键词： 跨越指定数量的轨道，如 grid-column: span 2; (跨两列)。
简写： grid-column: start / end;

<div class="grid grid-cols-3 grid-rows-2 gap-2">
    <div class="col-span-2 row-span-1 bg-blue-200">项目 A (跨2列)</div>
    <div class="col-start-3 row-start-1 bg-green-200">项目 B</div>
    <div class="col-span-full row-start-2 bg-yellow-200">项目 C (跨所有列)</div>
</div>

A

B

C

2. `grid-area` (区域放置)

如果容器定义了 grid-template-areas，项目可以通过名称放置。

<!-- HTML -->
<div class="grid" style="grid-template-areas: 'header header' 'sidebar content';">
    <header class="grid-area-[header]">Header</header>
    <nav class="grid-area-[sidebar]">Sidebar</nav>
</div>

<!-- 注：Tailwind 默认不支持直接 `grid-area-[header]`，需要通过自定义配置或内联使用 style 属性来实现 -->

3. `justify-self` / `align-self`

控制单个项目在其所在单元格内部的对齐方式（覆盖容器的 justify-items / align-items）。

<div class="grid grid-cols-3 grid-rows-1 h-32">
    <div class="self-start justify-self-end bg-blue-200 p-2">右上角</div>
    <div class="self-center justify-self-center bg-green-200 p-2">居中</div>
    <div class="self-end justify-self-start bg-yellow-200 p-2">左下角</div>
</div>

右上

居中

左下

🌐5. 复杂布局模式：现代CSS的威力

利用Flexbox和Grid的组合，我们可以轻松实现曾经非常棘手的复杂布局。

🏆 圣杯布局 (Holy Grail Layout)

左右两侧固定宽度，中间内容区自适应宽度的三列布局。页脚在底部。

HTML结构

<!-- outer-grid 使用内联style模拟grid-template-areas -->
<div class="grid min-h-screen" style="
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header header header'
        'left   center right'
        'footer footer footer';
">
    <header class="grid-area-[header] bg-blue-200 p-4">Header</header>
    <aside class="grid-area-[left] bg-green-200 p-4">Left Sidebar</aside>
    <main class="grid-area-[center] bg-yellow-200 p-4">Main Content</main>
    <aside class="grid-area-[right] bg-purple-200 p-4">Right Sidebar</aside>
    <footer class="grid-area-[footer] bg-orange-200 p-4">Footer</footer>
</div>

CSS（Tailwind兼容方式实现部分）

/* 示例使用内联style，通常会在tailwind.config.js中扩展gridTemplateAreas */
/* 也可以手动为每个 grid-area 定义类, 比如 .grid-area-\[header\] { grid-area: header; } */
/* 实现效果见右侧可视化区域 */

Header

Center

💧 瀑布流布局 (Masonry/Pinterest Layout)

内容块高度不一，按多列排列，且下一块自动填充到当前列最短的位置。目前纯CSS完美实现瀑布流（无JS排序）需要浏览器支持 display: masonry; 或 layout-mode: masonry; 属性（实验中）。但我们可以使用 Grid 或 Flexbox 模拟其部分效果。

HTML结构

<!-- 使用Grid模拟，通过给item设置不同的行跨度 -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] auto-rows-[minmax(100px,auto)] gap-4 items-start">
    <div class="layout-item-blue p-4 rounded shadow-md">短内容卡片</div>
    <div class="layout-item-green h-32 p-4 rounded shadow-md">中等内容卡片</div>
    <div class="layout-item-yellow h-48 p-4 rounded shadow-md">长内容卡片</div>
    <div class="layout-item-purple p-4 rounded shadow-md">短内容卡片</div>
    <div class="layout-item-orange h-36 p-4 rounded shadow-md">另一卡片</div>
    <div class="layout-item-blue h-28 p-4 rounded shadow-md">还有一张</div>
</div>

CSS（Tailwind类）

<!-- 关键CSS属性直接嵌入到Tailwind类中 -->
.grid-cols-\[repeat\(auto-fill\,minmax\(180px\,1fr\)\)\] {}
.auto-rows-\[minmax\(100px\,auto\)\] {}
.gap-4 {}
.items-start {} /* 确保项目从顶部对齐 */

/* 对于不同高度，可以通过设置 grid-row: span N; 来模拟 */
/* 比如，一个元素内容长，手动给它加 grid-row-span-[2] 类 */
/* 但这通常需要JS来动态计算，纯CSS模拟仍有限 */

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

（此可视化效果为Grid auto-fill/gap，并非完美瀑布流。纯CSS瀑布流需要layout-mode: masonry等未来属性或JS）

📱6. 响应式布局深入实践：流动与适应

响应式设计是现代Web的基石。结合媒体查询，Flexbox和Grid可以构建极具弹性的布局，适应从手机到超宽显示器的各种设备。

📊 媒体查询的高级应用

除了 min-width (移动优先)，还可以使用 max-width (桌面优先)，orientation (横竖屏)，resolution 等。

/* 桌面设备样式 (max-width) */
@media (max-width: 767px) {
    .sidebar { display: none; } /* 在小屏幕隐藏侧边栏 */
}

/* 打印样式 */
@media print {
    body { font-size: 12pt; }
    nav, footer { display: none; }
}

🔄 Flexbox 响应式流式卡片

实现卡片列表在不同屏幕尺寸下自动调整列数。

<div class="flex flex-wrap justify-center gap-4 p-4">
    <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-blue-100 p-4 rounded shadow">卡片 1</div>
    <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-green-100 p-4 rounded shadow">卡片 2</div>
    <!-- 更多卡片 -->
</div>

Card 1

Card 2

Card 3

Card 4

Card 5

🎯 Grid 响应式布局：断点切换与 `auto-fit`

Grid的 auto-fit 或 auto-fill 结合 minmax() 是实现真正自适应响应式布局的强大组合。

示例：页面主要区域从单列到多列的转换

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-indigo-100 p-6 rounded shadow">内容模块 1</div>
    <div class="bg-indigo-200 p-6 rounded shadow">内容模块 2</div>
    <div class="bg-indigo-300 p-6 rounded shadow">内容模块 3</div>
    <div class="bg-indigo-400 p-6 rounded shadow">内容模块 4</div>
</div>
/* 小屏幕 (mobile-first): 单列
   中等屏幕 (md:>=768px): 两列
   大屏幕 (lg:>=1024px): 三列 */

模块 1

模块 2

模块 3

模块 4

❓7. 常见问题解答 (FAQ)

Flexbox和Grid哪个性能更好？ ▼

一般来说，现代浏览器对Flexbox和Grid的性能优化都很好，无需过度担心。它们都比传统的浮动或定位布局有着更优的渲染性能。选择哪一个更多是基于布局需求：

一维布局（行或列）： Flexbox通常更简单直接。
二维布局（行和列）： Grid是为此设计的，性能和开发效率更高。

关键在于正确使用而非盲目追求某个“更优”。

我可以混合使用Flexbox和Grid吗？ ▼

绝对可以，并且强烈推荐！ 这是现代前端开发的最佳实践之一。

Grid负责宏观布局： 将整个页面划分为头部、侧边栏、主内容区、底部等主要区域。
Flexbox负责微观布局： 在Grid定义的各个区域内部，使用Flexbox来排列和对齐内容（例如，导航栏中的链接对齐，卡片内部的标题和描述对齐）。

这种组合能够充分发挥两者的优势，实现既有清晰整体结构又具备精细内部排列的复杂布局。

如何让布局更易于维护和调试？ ▼

语义化HTML： 使用正确的HTML标签（<header>, <main>, <aside>, <section>, <footer> 等）。
合适的命名： 为Grid区域和关键Flex容器命名，提高可读性。
组件化思想： 将页面拆分为独立的、可重用的组件，每个组件内部使用合适的布局。
开发工具： 充分利用浏览器开发者工具（Chrome/Firefox都有强大的Grid/Flexbox检查器）。
文档和注释： 为复杂的布局逻辑添加适当的注释。

✨8. 未来展望与总结

Flexbox和CSS Grid已经彻底改变了我们构建Web布局的方式，它们提供了前所未有的灵活性和控制力。但CSS的发展永无止境，未来的趋势包括：

🔮 值得关注的CSS新特性

容器查询 (Container Queries): 允许组件根据其父容器的大小而非视口大小来响应式调整，实现真正的组件级响应。
子网格 (Subgrid): 解决嵌套Grid时子项无法与父Grid对齐的问题，使嵌套布局更强大。
级联层 (Cascade Layers): 提供更多对CSS层叠机制的控制，管理CSS优先级冲突。

掌握Flexbox和Grid，您将自信地驾驭任何网页布局挑战！祝您在前端之路上越走越远！

🚀1. 导论：CSS布局的演进与核心概念

💡 为什么现代布局技术如此重要？

📏 盒子模型 (Box Model) 核心

🏗️2. 传统布局方法：理解其局限性

📜 文档流 (Normal Flow)

🏊 浮动布局 (Floats)

HTML结构

CSS示例（Tailwind类）

📍 定位 (Positioning)

HTML结构

CSS示例（Tailwind类）

📊 表格布局 (Tables)

➡️3. Flexbox (弹性盒子)：一维布局的艺术

✅ 核心概念：容器与项目

🔧 Flex容器常用属性详解

1. flex-direction (主轴方向)

2. justify-content (主轴对齐)

3. align-items (交叉轴对齐)

4. flex-wrap (项目换行)

5. gap (简写 grid-gap)

🔗 Flex项目常用属性详解

1. flex-grow (放大比例)

2. flex-shrink (缩小比例)

3. flex-basis (主轴基准值)

4. flex (简写属性)

5. align-self (单个项目交叉轴对齐)

💡 Flexbox实战场景

多列等高布局

短内容标题

长内容标题

Sticky Footer (粘性底部)

💎4. CSS Grid (网格布局)：二维布局的终极方案

✅ 核心概念：容器与项目

🔧 Grid容器常用属性详解

1. grid-template-columns / grid-template-rows

2. gap (简写 column-gap / row-gap)

3. grid-template-areas (命名网格区域)

🔗 Grid项目常用属性详解

1. grid-column / grid-row

2. grid-area (区域放置)

3. justify-self / align-self

🌐5. 复杂布局模式：现代CSS的威力

🏆 圣杯布局 (Holy Grail Layout)

HTML结构

CSS（Tailwind兼容方式实现部分）

💧 瀑布流布局 (Masonry/Pinterest Layout)

HTML结构

CSS（Tailwind类）

📱6. 响应式布局深入实践：流动与适应

📊 媒体查询的高级应用

🔄 Flexbox 响应式流式卡片

🎯 Grid 响应式布局：断点切换与 auto-fit

❓7. 常见问题解答 (FAQ)

✨8. 未来展望与总结

🔮 值得关注的CSS新特性

1. `flex-direction` (主轴方向)

2. `justify-content` (主轴对齐)

3. `align-items` (交叉轴对齐)

4. `flex-wrap` (项目换行)

5. `gap` (简写 `grid-gap`)

1. `flex-grow` (放大比例)

2. `flex-shrink` (缩小比例)

3. `flex-basis` (主轴基准值)

4. `flex` (简写属性)

5. `align-self` (单个项目交叉轴对齐)

1. `grid-template-columns` / `grid-template-rows`

2. `gap` (简写 `column-gap` / `row-gap`)

3. `grid-template-areas` (命名网格区域)

1. `grid-column` / `grid-row`

2. `grid-area` (区域放置)

3. `justify-self` / `align-self`

🎯 Grid 响应式布局：断点切换与 `auto-fit`

目录导航

CSS网页布局大师班：Flexbox、Grid与高级模式详解

预览结果：