Bricks 容器与 Flexbox 布局：Section、Container、Block、Div 到底怎么选

为什么这篇是 Bricks 入门第一课

在 Bricks 里搭页面，九成时间你都在和四个布局容器打交道：Section、Container、Block、Div。它们都在左侧小部件面板「Layout」分类的最上方。搞懂它们的默认参数差异，后面排版效率能高一大截。

Bricks 这几个容器默认都走 Flexbox 布局，所以这篇文章分两半：先讲容器本身，再讲 Flexbox 的核心参数。

四种容器 Section / Container / Block / Div 的默认差异

四者本质上都是「带预设参数的包裹容器」，区别在于 Bricks 给它们设的默认值不同。

• Section：HTML 标签默认是语义化的 <section>。默认宽度 100%，等于整个浏览器窗口宽度。适合用来铺整屏背景色、背景图，或划分网站里不同的大区块。
• Container：HTML 标签是 <div>，默认宽度固定 1100px（即页面主体内容宽度）。大多数正文内容都放在它里面。
• Block：也是 <div>，默认宽度 100%，单行里只有一个 Block 时，它和 Container 一样宽。推荐用作「具体小部件的容器」。
• Div：同样 <div>，但完全没有任何预设参数，一切自己来。日常用得最少，需要裸容器时直接用 Block 代替即可。

一句话总结：常规页面用 Section + Container + Block 三件套就够了，Div 是给极端自定义场景留的。

brickswiki 视角：从 HTML 语义化角度，建议把「表达同一主题的内容」放在同一个 Section 里，一个 Section 内只放一个 Container，Container 下面再用多个 Block 去排具体小部件。这样的结构层级最清晰，后续维护也最省心。

Bricks 推荐的标准嵌套结构

一个干净的页面，结构通常是这样层层往下：

1. Section：负责整屏背景、最大块的区划。
2. Container（1100px）：放真正的内容主体。
3. Block：把一组相关小部件包在一起。
4. 小部件（Heading、Text、Image 等）：最终的内容元素。

照这个层级走，后面做响应式时只需在 Section / Container 层面调一次，下面的 Block 会跟着自适应。

Flexbox 入门：先把 Display 切到 flex

Flexbox 中文叫「弹性盒子」，是 Bricks 容器的默认布局方式。想用它的各项能力，第一步是在容器设置里把 Display 选成 flex。

切到 flex 之后，面板上会出现一整排参数。下面是最常用、也最该先记住的几个。

主轴对齐与交叉轴对齐

Flexbox 里有两个关键概念：

• 主轴（Main Axis）：由 Direction 决定。默认纵向（column），也可切到横向（row）。
• 交叉轴（Cross Axis）：与主轴垂直的那条轴。

对应到面板：

• Align main axis（主轴对齐）→ 标准 CSS 里的 justify-content。
• Align cross axis（交叉轴对齐）→ 标准 CSS 里的 align-items。

判断技巧：看面板图标的方向最直接——当你把 Direction 切到横向时，Align main axis 的图标方向也会跟着转，跟着图标走就不会搞反。

/* Bricks 容器的 Flexbox 在 CSS 层面的等价写法，方便对照理解 */
.container {
  display: flex;
  flex-direction: row;          /* 主轴方向：row 横向 / column 纵向 */
  justify-content: space-between; /* 主轴对齐（Align main axis） */
  align-items: center;          /* 交叉轴对齐（Align cross axis） */
}

换行、间距与元素排序

• Flex wrap：默认 no wrap（不换行），所有子元素硬挤在一行。需要折行时选 wrap，wrap-reverse 则是换行且顺序颠倒。
• Column gap / Row gap：子元素之间的横向、纵向间距，等价于 CSS 的 column-gap / row-gap。
• Order：同一层级容器之间的排列顺序，数字越小越靠前。注意它改的是「视觉顺序」而非 DOM 顺序。

.flex-row {
  display: flex;
  flex-wrap: wrap;   /* 超出容器宽度时自动换行 */
  gap: 16px;         /* 行列间距统一为 16px */
}

flex-grow / shrink / basis 是什么

这三个属于「高级且少用」的参数，但理解它能避免很多对齐诡异的问题：

• Flex grow：把容器「剩余空间」按比例分配给子元素。默认 0，即不自动扩张。
• Flex shrink：和 grow 相反，把「超出空间」按比例收缩。默认 1，即自动收缩。
• Flex basis：子元素的基准宽/高，作用同 width/height，但优先级更高。默认 auto，即按 width 来。

提示：日常排版基本用不到这三个，把 Display、方向、对齐、间距、排序玩明白，就已经跨过了 Bricks 布局这座大山。

小结

Bricks 的 Section / Container / Block / Div 是同一类包裹容器，差异只在默认参数；日常用前三件套即可。Flexbox 是它们的默认布局引擎，记住「Display 切 flex → 定方向 → 调主轴/交叉轴对齐 → 设间距与排序」这条主线，绝大多数页面布局都能搞定。

内容说明（整理稿）：本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程（源多为截图驱动教程，正文极薄），内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理，非原文逐字翻译，也不构成官方文档。操作入口/路径以你当前 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.

获取报价 →浏览全部教程