Bricks Layout 布局详解——Section / Container / Block / Div 四件套与 Flexbox

现象：元素堆一起、排不匀

你往画布拖了几个元素，它们要么全挤在一行、要么上下乱叠，怎么调都排不匀。这通常是没用对“容器”，直接在画布根上硬塞元素导致的。

根因：Bricks 用有层级的 Flex 布局

从 1.5 版起，Bricks 提供四种布局元素：Section、Container、Block、Div。它们底层都是 Flexbox，和 Elementor 靠“Flex 容器 + 嵌套”实现布局本质一样，但 Bricks 帮你把层级结构规划好了——你只要按“外层 Section → 里面 Container → 再里面 Block”的层级往里放，布局自然就顺。

和“所有东西都是同级的 div”相比，这种有层级的结构更好维护，也更符合语义。

步骤一：四种布局元素怎么选

• Section（部分）：最外层全宽容器，用来切页面大块，比如“首页 Hero 区”“产品区”各用一个 Section。
• Container（容器）：嵌在 Section 里，宽度等于你设的内容宽度，用来约束内部内容别撑太开。
• Block（块）：放在 Section 或 Container 里，做更细的内容分组。
• Div：不带任何 Bricks 布局预设样式，新手不推荐，除非你清楚自己在做啥。

日常最常用就是 Section + Container + Block 三层。

步骤二：HTML Tag 与 Display 设置

1. HTML Tag：每个布局元素都能切换 HTML 标签（Bricks 提供 9 个可选，如 section/header/main/article 等）。通常保持默认即可，需要语义化时再改。
2. Display：布局元素默认是 Flex。其他选项：
   • Block：块级，前后带换行。
   • Inline-Block：行内块。
   • Inline：行内，无换行。
   • None：直接不显示（等价于隐藏，选了就不用再设别的）。

Flex 是 Bricks 最常用、也最适合做响应式的布局方式。

步骤三：Flexbox 的换行 / 方向 / 对齐 / 间距

选中一个 Flex 布局元素，Style 里有这些 Flex 专属控件：

• Flex Wrap（换行）：No Wrap（不换行）/ Wrap（必要拆行）/ Wrap Reverse（反向拆行）。
• Direction（方向）：竖向 / 横向，加“反向”则把排列顺序颠倒（比如竖向 + 反向，原本在下的跑到上面）。
• Align（align-self）：以自身和父级为参照做交叉轴对齐。注意：根级元素外面没有父布局，这个设置不生效。
• Align main axis（justify-content）：主轴对齐，控制内部元素沿主轴怎么分布。
• Align cross axis（align-items）：交叉轴对齐，控制内部元素沿交叉轴怎么对齐。
• Column gap / Row gap：列间距 / 行间距，控制子元素之间的空隙。
• Order：用数字改同一布局内子元素的排列顺序。
• Flex Grow / Flex Shrink / Flex Basis：增长、收缩、基准尺寸，用来做“某列占更多空间”的弹性分配。

具体控件名称和图标位置在不同 Bricks 版本里可能微调，按官方文档补全。

常见误区

• 别在画布根上硬塞元素：直接在根上拖元素，没有容器承接，Flex 布局无从谈起——先建 Section → Container → Block 层级，再往里放内容。
• Div 新手别碰：Div 不带任何 Bricks 布局预设，用它得自己写完整布局逻辑，90% 的日常场景 Section / Container / Block 就够。
• Align 在根级不生效：Align（align-self）以父级为参照，根级元素外面没有父布局，设了等于白设。
• 响应式从桌面开始：先把桌面排顺，再切平板、手机断点微调，别倒过来；子元素间距用 Column / Row gap 控制，别用 margin 硬凑。

小结

Bricks 布局记住三句话：外层 Section 切大块、里面 Container 控宽度、Block 做细分；底层全是 Flexbox，靠 Direction / Wrap / 三组对齐 / gap 把元素排匀。Div 虽灵活但新手别碰。理清层级，布局就不再是玄学。

布局总是排不匀、响应式一塌糊涂？联系 Ray Chan，顺手帮你把 Bricks 的 Flex 布局理顺。

常见问题（FAQ）

Q：四种布局元素怎么选？ A：Section 切大块（100% 宽），Container 控内容宽度，Block 做细分，Div 灵活但无预设样式（新手不推荐）。日常就是 Section + Container + Block 三层。

Q：元素排不匀是怎么回事？ A：多半是没用容器直接在画布根上硬塞元素。先建好 Section → Container 层级，再配合 Flex 的 Direction / Wrap / 对齐 / gap 排列。

Q：Align 设置了没效果？ A：Align（align-self）以父级为参照，根级元素外面没有父布局，这个设置不生效。

Q：怎么控制子元素间距？ A：用 Column gap / Row gap（列间距 / 行间距），别用 margin 硬凑。

Q：响应式怎么做？ A：先把桌面排顺，再切平板、手机断点微调；布局元素默认 Flex，是最适合做响应式的布局方式。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程