Flexbox 与 Grid 容器进阶（完整图文步骤）

一、为什么容器取代了 Section

Elementor 3.6 之前，页面骨架是「Section → Column → Inner Section」。这套结构的问题是：层级死板、嵌套受限、生成的 HTML 包裹层特别多。

Flexbox 容器（Container）上线后，官方用 CSS Flexbox 和 Grid 这两套现代布局标准重做了骨架。以一个典型的三列布局为例，两者的输出量大致是这个级别 🚀：

对比项	Section + 列	Flexbox 容器
DOM 元素数	约 12 个	约 4 个
CSS 类数	约 18 个	约 6 个
嵌套能力	最多两层（Inner Section）	理论上不限层（建议 ≤3–5 层）
响应式	需逐端手动调	大部分场景自动适配
给整块区域加链接	不支持	支持（HTML 标签改 <a>）

DOM 大幅减少（第三方实测整页 DOM 减少约三分之一），意味着更快的渲染速度和更好的 Core Web Vitals 成绩。新页面请一律用容器，不要再建 Section。

💡 检查你的站：新版 Elementor 默认以容器（Flexbox / Grid）作为页面骨架，无需手动开启——在编辑器里点「+」，能直接看到「Flexbox（弹性盒）/ 网格」两种容器类型就说明一切正常。如果你的编辑器里只有旧式「区块（Section）」，先把 Elementor 更新到最新版再继续。

---

二、Flexbox 容器的五个核心属性

选中一个容器，左侧面板「布局」标签里的这些选项，对应的就是 CSS Flexbox 的核心概念 🔍：

设置	控制什么	常用场景
方向（Direction）	主轴：横向（→）还是纵向（↓）	横向做并排，纵向做堆叠
内容对齐（Justify Content）	子元素沿主轴的分布	Space Between 两端对齐、Center 居中
项目对齐（Align Items）	子元素沿交叉轴的对齐	Center 垂直居中
间隙（Gap）	子元素之间的间距	统一卡片间距，替代逐个设 Margin
换行（Wrap）	空间不够时是否换行	多卡片自动折行

🧭 2.1 方向与对齐的配合（最容易混）

记住一句话：Justify 管主轴，Align 管交叉轴，主轴方向一变，两者的效果就互换。

• 方向横向（→）：Justify Content 控制水平分布，Align Items 控制垂直对齐。
• 方向纵向（↓）：Justify Content 控制垂直分布，Align Items 控制水平对齐。

新手最常犯的错：想把内容垂直居中，却一直调 Justify Content。容器方向是横向时，垂直居中要调的是 Align Items → Center。

📏 2.2 用 Gap 代替 Margin

老习惯是给每个小部件设下边距制造间距。容器时代的正确姿势：

1. 选中父容器。
2. 布局 → 间隙（Gap）设为 20px。
3. 所有子元素间距统一，新增或删除子元素时自动保持一致。

⚠️ 混用 Gap 和 Margin 是间距「忽大忽小」的头号原因。定了用 Gap，就把子元素自带的 Margin 清零。

↔️ 2.3 子元素的伸缩控制

点中容器内的某个子元素（子容器或小部件），在「高级 → 布局」里有三个弹性属性：

• Grow（伸展）：有剩余空间时是否放大。两个子元素 Grow 都设 1，就平分剩余宽度。
• Shrink（收缩）：空间不足时是否被压缩。
• Basis（基准）：分配前的基础宽度。

场景举例：左边固定 300px 的侧边栏 + 右边自适应的内容区——左侧子容器宽度设 300px，右侧子容器 Grow 设 1 即可，不用算百分比。

---

三、Grid 容器：规则网格的选择

添加容器时除了 Flexbox，还能选 Grid（网格）。两者分工 🎯：

场景	选谁
一行内灵活排列、对齐、分布	Flexbox
多行多列的规则网格（如 3×2 产品卡片矩阵）	Grid
需要嵌套复杂结构	Flexbox（Grid 不能嵌套 Grid）
要求每行每列严格等高对齐	Grid

Grid 的设置思路是：先定义「列数 × 行数」的网格轨道（比如 3 列），子元素自动按顺序填入格子，间距用 Gap 统一控制。

💡 经验法则：90% 的布局 Flexbox 都能解决；只有当你明确需要「棋盘格」式的规整矩阵时才上 Grid。4.2 版本起 Atomic 编辑器也加入了新的 Grid 布局能力，属于同一思路的延续。

---

四、容器嵌套：复杂布局的正确姿势

🪆 4.1 嵌套的基本套路

「大容器套小容器」是容器时代的标准动作——比如一个横向大容器里套两个小容器：小容器 A 宽度 20% 放 Logo，小容器 B 宽度 80% 放导航菜单。

操作步骤：

1. 添加一个大容器，方向设为横向。
2. 在大容器内添加一个小容器，宽度设 20%。
3. 右键小容器 → 复制，把新容器宽度改为 80%。
4. 往两个小容器里分别拖内容。

⚠️ 4.2 嵌套纪律

• 控制在 3 层以内，最多 5 层。层级每多一层，DOM 多一圈，后期维护和移动端适配都更难。
• 能用「方向 + 对齐 + Gap」解决的，不要再加一层嵌套。
• 打开导航器看结构树：如果树深得像楼梯，大概率是嵌套过度了。

🔗 4.3 容器的独门技巧：整块加链接

容器可以把 HTML 标签改成 <a>，让整个区域变成一个可点击的链接：

1. 选中容器 → 布局 → HTML 标签（HTML Tag）。
2. 选择 a (link)，填入链接地址。
3. 整个卡片区域都可点击。

做 Loop 列表卡片、服务卡片时特别好用——不用给标题、图片、按钮分别加链接。

⚠️ 注意：给容器加链接前，先把卡内标题、按钮等元素上已有的链接去掉——链接里套链接会失效。

---

五、把旧 Section 页面迁移到容器

老站点里有大量用 Section 做的页面，可以逐块转换 🔄。

🔁 5.1 转换步骤

1. 用 Elementor 打开包含旧 Section 的页面。
2. 选中某个 Section，点顶部把手上的 「转换（Convert）」 按钮。
3. Elementor 会在原 Section 下方生成一个等效的容器版本。
4. 检查容器版效果（重点看间距和对齐），确认无误后删除上方的旧 Section。

⚠️ 5.2 迁移注意

• 删除旧 Section 前想清楚：转换本身不动原 Section（只是在下方生成一个容器副本），但手动删除旧 Section 后，就只能靠历史记录（Ctrl+Z）或备份找回了。大页面建议先存草稿或备份再删。
• 没有「整站一键转换」，只能逐页面、逐区块手动转。优先级：首页和主转化页先转，老博客页可以不动。
• 转换后常见偏差：间距（旧 Margin 逻辑 vs 新 Gap 逻辑）、列对齐。对照原页面微调即可。
• 没时间全部迁移也没关系——Section 和容器可以共存于同一页面，不冲突。

---

六、实战：做一个自适应卡片列表

目标：一排卡片，桌面端每行 4 张，屏幕变窄自动折行，卡片间距统一 🎯。

1. 添加一个 Flexbox 容器，方向横向，换行（Wrap）设为 Wrap。
2. 间隙（Gap）设 24px。
3. 拖入一个子容器作为卡片：样式 → 背景白色、边框圆角 8px、阴影；高级 → Padding 24px。
4. 卡片里放图片 + 标题 + 文本。
5. 卡片宽度计算：想要每行 4 张，把卡片子容器的宽度设为约 23.5%（留 Gap 空间）。
6. 右键卡片 → 复制 7 次，共 8 张卡，自动排成两行。
7. 切到平板视图：把卡片宽度改为 48%（每行 2 张）；手机视图：改为 100%（每行 1 张）。

✅ 这种「Flexbox + Wrap + 百分比宽度」的组合，是卡片列表的标准解法，比老 Section 时代省至少一半操作。

---

七、常见问题排查

⛔ 7.1 找不到「转换」按钮

• 只有旧版 Section 才有转换按钮，容器本身没有（不需要转）。
• 如果页面里全是容器、找不到任何 Section，就是没有可转换的对象——正常现象，不是故障。

⛔ 7.2 子元素没有按预期排列

• 第一检查方向（Direction）：横向/纵向选错，所有对齐都会「反过来」。
• 第二检查换行（Wrap）：子元素挤在一行不换行，或意外折行，都是 Wrap 设置的问题。
• 第三检查是否有子元素设了固定宽度把空间占满。

⛔ 7.3 垂直居中不生效

• 容器需要有高度才有「居中」可言：先给容器设最小高度（Min Height），再设 Align Items → Center。
• 方向为纵向时，垂直居中要调 Justify Content。

⛔ 7.4 Gap 设了但间距没变

• Gap 只作用于容器的直接子元素。如果你看的是孙级元素的间距，要在对应的子容器上设 Gap。
• 子元素自身有 Margin 会叠加在 Gap 上，把子元素 Margin 清零再观察。

⛔ 7.5 转换后移动端布局乱了

旧 Section 的响应式设置不会完美映射到容器。转换后务必切到平板、手机视图各检查一遍，重点调子容器的宽度百分比和方向。