Klein's-blue的博客

记录生活，分享技术

0%

现代布局

CSS 现代布局：Flex 与 Grid（2025-2026 主流实用版）

1. Flex 布局（弹性盒布局）—— 一维布局神器

1.1 核心概念速记

  • 容器（flex container）：display: flex 或 display: inline-flex
  • 项目（flex items）：容器的直接子元素
  • 主轴（main axis）：默认水平（row），由 flex-direction 决定
  • 交叉轴（cross axis）：垂直于主轴

1.2 容器常用属性（最常使用的）

属性 常用值 作用说明 日常推荐度
flex-direction row（默认） / row-reverse / column / column-reverse 主轴方向 ★★★★★
flex-wrap nowrap（默认） / wrap / wrap-reverse 是否换行 ★★★★☆
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly 主轴对齐 ★★★★★
align-items stretch（默认） / flex-start / center / flex-end / baseline 交叉轴单行对齐 ★★★★★
align-content 同上（多行时生效） 交叉轴整体（多行）对齐 ★★★☆☆
gap / row-gap / column-gap 任意长度（推荐） 项目间距（现代神器，取代 margin） ★★★★★

1.3 项目（flex item）常用属性

属性 常用值示例 作用说明
flex 1 / 0 1 auto / 1 1 0 flex-grow + flex-shrink + flex-basis 简写
flex-grow 0（默认） / 1 / 2… 剩余空间分配比例
flex-shrink 1（默认） / 0 空间不足时收缩比例
flex-basis auto（默认） / 0 / 200px 主轴基础尺寸（建议优先用）
align-self 同 align-items 单个项目覆盖容器交叉轴对齐
order 0（默认） / 整数 排列顺序（很少用）

1.4 真实项目常见 Flex 模式（强烈建议背诵）

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
31
32
33
34
35
36
37
38
39
40
41
/* 1. 经典水平居中 + 垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 2. 导航栏（两端对齐 + 间距均匀） */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

/* 3. 等分栅格（经典三分/四分） */
.grid-equal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.grid-equal > * {
  flex: 1 1 300px;           /* 推荐：弹性伸缩 + 最小宽度 */
}

/* 4. 卡片底部固定按钮（垂直布局 + 推到底部） */
.card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.card-content {
  flex: 1;                   /* 内容占满剩余空间 */
}

.card-footer {
  margin-top: auto;          /* 或者 flex-grow: 0 */
}

2. Grid 布局（网格布局）—— 二维布局王者

2.1 核心概念速记

  • 网格容器：display: grid 或 inline-grid
  • 网格轨道：行（grid-template-rows）/ 列（grid-template-columns）
  • 网格单元：单个格子
  • 网格线：构成网格的线（1~n+1）
  • 网格区域：命名的连续区域

2.2 容器核心属性（2025-2026 高频）

属性 常用写法示例 说明与记忆口诀
grid-template-columns repeat(3, 1fr) / 200px 1fr minmax(150px, auto) 列定义
grid-template-rows repeat(4, 100px) / auto 1fr auto 行定义
gap / row-gap / column-gap 1.5rem / 20px 轨道间距（强烈推荐）
grid-auto-rows / grid-auto-columns 100px / minmax(100px, auto) 隐式创建的轨道尺寸
grid-auto-flow row（默认） / column / dense 自动填充顺序（dense 填空最常用）
justify-items / align-items start / center / end / stretch 所有单元格内容对齐
place-items center / center stretch align-items + justify-items 简写

2.3 网格常用高级技巧（现代项目必备）

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
31
32
33
34
/* 1. 响应式自动填充网格（最常用） */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* 2. 经典 12 列栅格系统（现代写法） */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

/* 3. 命名区域布局（经典圣杯布局） */
.page {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main   ads"
    "footer footer footer";
  grid-template-columns: 240px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

header { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
.ads    { grid-area: ads; }
footer  { grid-area: footer; }

2.4 repeat / minmax / auto-fit / auto-fill 对比（必背）

函数/值 说明 典型使用场景
repeat(次数, 尺寸) 重复创建轨道 固定列数网格
minmax(min, max) 轨道尺寸在 min~max 之间自动调整 弹性 + 最小宽度保护
auto-fit 尽可能多放列，填不满时拉伸现有列 响应式布局首选（推荐）
auto-fill 尽可能多放列，填不满时空位保留 需要固定格子数（较少用）

一句话记忆：
做响应式卡片网格 → 用 repeat(auto-fit, minmax(280px, 1fr))

3. 2025-2026 布局选择快速决策表

需求场景 首选方案 次选方案 理由简述
水平/垂直居中 Flex + place-items: center Grid + place-items Flex 更简单
等分卡片列表（响应式） Flex + flex-wrap + flex:1 Grid auto-fit Grid 更精确控制间距
经典导航栏（logo + 菜单 + 按钮） Flex + justify-content:space-between Grid Flex 更自然
完整页面布局（头尾 + 侧边栏） Grid + grid-template-areas Flex + flex-direction:column Grid 更清晰、直观
复杂二维对齐（表单/仪表盘） Grid Flex + 多层嵌套 Grid 天生二维
圣杯/双飞翼布局 Grid Flex Grid 更简洁