FE-02-CSS3 进阶：Flex、Grid、动画与容器查询

字数统计: 2k字   |   阅读时长≈ 10分

FE-02-CSS3 进阶：Flex、Grid、动画与容器查询

本节目标：掌握 Flexbox 和 Grid 的全部核心概念、CSS 动画与过渡、容器查询与 @layer 等现代特性。

1. Flexbox（弹性盒子）

一维布局，沿主轴方向排列子元素。

1.1 容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  display: flex;            /* 或 inline-flex */

  /* 主轴方向（默认 row）*/
  flex-direction: row | row-reverse | column | column-reverse;

  /* 换行 */
  flex-wrap: nowrap | wrap | wrap-reverse;

  /* 主轴对齐 */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

  /* 交叉轴对齐 */
  align-items: stretch | flex-start | flex-end | center | baseline;

  /* 多行对齐（仅 wrap 时） */
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

**速记 flex-flow**：flex-direction: row; flex-wrap: wrap; → flex-flow: row wrap;

1.2 项目属性

1
2
3
4
5
6
7
8
.item {
  flex: 1 1 200px;     /* 简写：grow shrink basis */
  flex-grow: 1;         /* 放大比例，默认 0 */
  flex-shrink: 1;      /* 缩小比例，默认 1 */
  flex-basis: 200px;    /* 基础尺寸，默认 auto */
  order: 2;            /* 排列顺序，数字小的在前 */
  align-self: center;  /* 单独覆盖 align-items */
}

1.3 经典场景

居中：

1
.parent { display: flex; justify-content: center; align-items: center; }

导航栏：

1
2
3
.nav { display: flex; }
.nav .logo { margin-right: auto; }  /* 把后面的项推到右边 */
.nav .item { padding: 0 1rem; }

圣杯布局：

1
2
3
.holy-grail { display: flex; }
.holy-grail > main { flex: 1; }      /* 占满中间 */
.holy-grail > nav, aside { flex: 0 0 200px; }

等高卡片：

1
2
.row { display: flex; }
.card { flex: 1; }  /* 默认 stretch，所有卡片自动等高 */

2. Grid（网格布局）

二维布局，行列同时控制。

2.1 容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container {
  display: grid;

  /* 定义列 */
  grid-template-columns: 200px 1fr 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* 响应式 */
  grid-template-columns: 1fr 2fr 1fr;  /* 比例 */

  /* 定义行 */
  grid-template-rows: 100px auto 1fr;

  /* 区域命名（高级） */
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";

  /* 间距 */
  gap: 16px;                    /* 行列同 */
  row-gap: 16px;
  column-gap: 24px;

  /* 对齐 */
  justify-items: stretch | start | end | center;
  align-items: stretch | start | end | center;
  place-items: center;          /* 简写 */
  justify-content: center;
  align-content: center;
}

2.2 项目属性

1
2
3
4
5
6
7
.item {
  grid-column: 1 / 3;          /* 从第 1 列跨到第 3 列 */
  grid-row: 2 / 4;
  grid-area: header;            /* 用 area 名 */
  justify-self: center;
  align-self: center;
}

2.3 经典场景

12 列网格：

1
2
3
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-6 { grid-column: span 6; }  /* 占 6 列 */
.col-4 { grid-column: span 4; }

响应式（无 media query）：

1
2
3
4
5
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

宽度够就多放几列，不够自动换行。

瀑布流：

1
2
3
4
5
6
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
}
.masonry > * { grid-row: span 20; }  /* 每项占 20 行 */

圣杯布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}
.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: nav; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

3. CSS 变量（自定义属性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:root {
  --color-primary: #1e6fdc;
  --color-bg: #ffffff;
  --spacing-md: 16px;
  --font-size: 16px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);

  /* 回退值 */
  color: var(--color-text, #333);

  /* 嵌套（变量套变量） */
  --shadow: 0 0 0 1px var(--color-primary);
  box-shadow: var(--shadow);
}

/* 运行时修改 */
document.documentElement.style.setProperty('--color-primary', '#ff6600');

4. CSS 动画

4.1 transition（过渡）

1
2
3
4
5
6
.button {
  background: #1e6fdc;
  transition: background 0.3s ease, transform 0.2s ease-out;
  /* transition: all 0.3s;  ← 不要用 all（性能差） */
}
.button:hover { background: #1857b8; transform: scale(1.05); }

timing function：

  • linear：匀速
  • ease：默认，慢-快-慢
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：慢-快-慢
  • cubic-bezier(0.4, 0, 0.2, 1)：Material 标准
  • steps(4)：分步动画

4.2 @keyframes 动画

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  animation: fadeInUp 0.6s ease-out forwards;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;  /* 保持结束状态 */
  animation-play-state: running;
}

多动画：animation: fadeIn 0.3s, slideIn 0.5s 0.2s;

prefers-reduced-motion（无障碍）：

1
2
3
4
5
6
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

4.3 transform（变换）

1
2
3
4
5
6
7
8
9
.box {
  /* 2D */
  transform: translate(10px, 20px) rotate(45deg) scale(1.5) skew(10deg);
  transform-origin: center;        /* 变换原点 */
  /* 3D */
  transform: rotateY(45deg) translateZ(100px);
  transform-style: preserve-3d;
  perspective: 1000px;            /* 透视 */
}

性能优化：只动 transform 和 opacity（走合成层，不重排/重绘）。

5. 现代 CSS 特性

5.1 容器查询（@container）

根据父容器尺寸（不是视口）来响应式：

1
2
3
4
5
6
7
8
9
10
11
12
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
}

@container card (max-width: 399px) {
  .card { display: flex; flex-direction: column; }
}

5.2 @layer（层级管理）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.5; }
}

@layer components {
  .button { /* ... */ }
}

@layer utilities {
  .text-center { text-align: center; }
}

/* 后面写的 @layer 优先级低；同 layer 后写覆盖先写 */

5.3 :has()（父选择器）

1
2
3
4
5
6
7
8
/* 含已勾选 checkbox 的父元素 */
form:has(input[type="checkbox"]:checked) { background: green; }

/* 含无效输入的字段 */
.field:has(input:invalid) { border-color: red; }

/* 含图片的卡片 */
.card:has(img) { display: grid; grid-template-columns: 200px 1fr; }

5.4 :is() 和 :where()

1
2
3
/* 简化选择器列表 */
:is(h1, h2, h3) { line-height: 1.2; }  /* 优先级 = 最高那个 */
:where(h1, h2, h3) { line-height: 1.2; }  /* 优先级 = 0 */

5.5 aspect-ratio

1
2
.video { aspect-ratio: 16 / 9; }
.avatar { aspect-ratio: 1; border-radius: 50%; }

5.6 :focus-visible

1
2
.button:focus { outline: none; }              /* 永远不要这样！ */
.button:focus-visible { outline: 2px solid #1e6fdc; }  /* 键盘聚焦才显示 */

5.7 color-mix 和相对颜色

1
2
3
4
5
6
7
.button {
  --color: #1e6fdc;
  background: var(--color);
  /* 派生颜色 */
  border: 1px solid color-mix(in srgb, var(--color) 50%, white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color) 30%, transparent);
}

6. 性能优化

6.1 GPU 加速

1
2
3
4
5
/* 触发合成层（独立渲染） */
.gpu {
  will-change: transform;        /* 提示浏览器会变化 */
  transform: translateZ(0);      /* 或直接提升 */
}

注意：不要滥用 will-change（会占用显存）。

6.2 避免触发布局

1
2
3
4
5
6
7
8
/* 触发布局（重排）- 慢 */
width, height, padding, margin, top, left, ...

/* 只触发重绘 - 中 */
color, background, box-shadow, ...

/* 只触发合成 - 快 */
transform, opacity, filter

6.3 content-visibility（跳过渲染）

1
2
3
4
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;  /* 估算高度，避免滚动条跳动 */
}

7. 现代 CSS 架构

7.1 BEM 命名

1
2
3
4
5
6
7
8
.block { }
.block__element { }
.block--modifier { }

.card { }
.card__title { }
.card__body { }
.card--featured { }

7.2 CSS Modules（构建时作用域）

1
2
3
/* Card.module.css */
.card { padding: 16px; }
.title { font-size: 1.2rem; }
1
2
3
4
import styles from './Card.module.css';
<div className={styles.card}>
  <h2 className={styles.title}>...</h2>
</div>

7.3 CSS-in-JS（运行时）

1
2
3
4
5
6
7
8
9
import styled from '@emotion/styled';

const Button = styled.button`
  background: ${props => props.primary ? '#1e6fdc' : 'white'};
  color: ${props => props.primary ? 'white' : '#333'};
  padding: 8px 16px;
`;

<Button primary>Click</Button>

7.4 Tailwind（实用类）

1
2
3
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click
</button>

8. 实战：响应式卡片网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  container-type: inline-size;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

@container (min-width: 400px) {
  .card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
</style>

小结

概念 用法
Flexbox 一维布局，主轴 + 交叉轴
Grid 二维布局，rows + columns
自定义属性 CSS 变量，运行时可改
transition 状态过渡
@keyframes 关键帧动画
transform 性能最好的动画属性
@container 基于父容器大小的响应式
@layer 优先级管理
:has() 父选择器
will-change 提示 GPU 加速

下一节讲浏览器渲染原理：DOM / CSSOM / 重绘 / 回流 / 合成层。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870