Bricks Container 与 Flexbox 布局入门：建站最该先搞懂的一课

先说结论：在 Bricks 里，你看到的 90% 的页面布局，底层都是 Container 套 Container，再靠 Flexbox 把里面的东西摆正。搞定 Container + Flexbox，后面什么页眉页脚、文章列表、产品卡片，全是同一套思路换皮。

为什么先学 Container

很多新手一上来就拖“栏”“块”“栅格”，结果越叠越乱，改一处崩一片。Bricks 的哲学很简单：一个 Container 就是一块可排版的盒子，你要做的只有两件事——往盒子里放东西，以及告诉盒子“怎么排这些东西”。

所以别急着学高级组件，先把 Container 玩明白。这是地基。

Container 到底是什么

在 Bricks 编辑器左侧元素面板里，最常用、也最该先认识的就是 Container（容器）。它本质上是一个 <div>，Bricks 默认把它设成 flex 布局（display: flex），所以你拖进来的子元素，默认会沿一条“主轴”排成一行。

Container 的样式面板里有个 Layout（布局） 分区，核心就四个旋钮：

• Direction（方向）：row（横着排）还是 column（竖着堆）

• Justify content（主轴对齐）：这一行 / 一列里的东西，贴左、居中、贴右、还是两端撑开

• Align items（交叉轴对齐）：垂直于主轴方向的“上下 / 左右”对齐

• Gap（间距）：子元素之间的缝隙

小贴士：Container 还有个 Width 开关，Block = 占满整行（做通栏背景用），Contained = 限制最大宽度并居中（正文内容用）。做页眉页脚、文章正文时，外层一般用 Contained，需要整屏背景色时切到 Block。

Flexbox 三板斧：方向、对齐、间距

下面这套概念记死，全站通用：

1. 方向 Direction

• row：子元素从左到右排（默认）

• column：子元素从上到下堆

2. 主轴对齐 Justify content

假设方向是 row（横向），主轴就是“左右”：

• flex-start：全贴左

• center：整体居中

• flex-end：全贴右

• space-between：两头贴边，中间均分（最常用，做导航条神器）

• space-around / space-evenly：类似，间距算法略有不同

3. 交叉轴对齐 Align items

方向是 row 时，交叉轴是“上下”：

• stretch：子元素拉满高度（默认）

• center：垂直居中

• flex-start / flex-end：贴上 / 贴下

4. 间距 Gap

直接填数字（比如 20 表示 20px），就是子元素之间的统一缝隙。比手动给每个元素加 margin 干净得多。

对应生成的 CSS 长这样，方便你对照理解：

/* Bricks 里一个横向、两端对齐、垂直居中、间距 24px 的容器 */
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

实战：搭一个顶部导航条

来真刀真枪做一个：左边 Logo，中间菜单，右边“立即咨询”按钮。

步骤 1：拖一个 Container 到画布，方向设 row，Justify 设 space-between，Align 设 center，Gap 设 24。这就是那条导航的“横梁”。

步骤 2：往横梁里放三个东西：

• 一个 Image（或 Site Logo） 元素 → 放 Logo

• 一个 Nav Menu 元素 → 选你在 外观 → 菜单 里建好的菜单

• 一个 Button 元素 → 写“立即咨询”，链接到联系页

步骤 3：横梁本身再套一个外层 Container（Direction 设 row，Width 设 Contained，最大宽度 1200，左右留白自动居中），把上面那根横梁放进去。这样不管屏幕多宽，内容都稳稳居中在 1200px 内。

结构就是：

外层 Container（居中，max-width 1200）
└─ 内层 Container（row / space-between / center / gap 24）
   ├─ Logo（Image）
   ├─ 菜单（Nav Menu）
   └─ 按钮（Button）

踩坑提醒：别把 Logo、菜单、按钮三个直接拖到画布根层再手动调位置。一定要先建横梁 Container，再把三个丢进横梁里——否则它们各跑各的，响应式一塌糊涂。

子元素的 Flex 控制

有时候你想让某个子元素“吃掉”多余空间（比如中间菜单占满、两边固定），选中那个子元素，在它的 Layout → Flex 里调：

• flex-grow: 1 → 有空位就撑开

• flex-shrink: 0 → 空间不够也不压缩（固定宽度的 Logo / 按钮常用）

• align-self → 单独覆盖父级的 Align items，只动自己

比如让菜单 grow 成 1、Logo 和按钮 shrink 设 0，导航条在窄屏下也能保持两头不动、中间自适应。

什么时候该用 Flexbox（适用场景）

下面这些场景闭眼选 Flexbox：顶部导航条的 Logo+菜单+按钮一排、产品卡片横向平铺并自动换行、表单里 label 和输入框同一行、任何需要水平垂直居中的地方、移动端用 order 重排元素顺序。反过来，规整的二维网格（比如相册九宫格、后台表格）优先考虑 CSS Grid，Flexbox 更适合「一条轴线上排布」。记住：Bricks 的 Container 默认就是 flex 容器，不用额外加类。

常见翻车点

1. 忘了 Container 默认是 flex：你拖了两个元素进去，发现它们并排而不是上下，就是因为方向是 row。想要上下堆，把 Direction 改成 column。

2. Gap 和 margin 打架：统一用 Gap 控制子元素间距，别再给每个子元素手动加 margin，否则响应式时算不清。

3. 响应式断点没调：在编辑器顶部的断点切换（桌面 / 平板 / 手机）里，手机上把横梁 Direction 改成 column，否则菜单会和 Logo 挤成一行。Bricks 每个布局属性都能按断点分别设。

4. 外层没限制宽度：直接把内容放 Block 容器，结果 4K 屏上字拉到屏幕两边。正文类容器记得用 Contained + 最大宽度。

搞定这一课，你已经能摆出全站 80% 的布局骨架了。下一课我们拿它来做页眉页脚。

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

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

常见问题（FAQ）

Container 和 Div 有什么区别？ Container 是 Bricks 的弹性布局容器，默认开启 flex，用来搭结构；Div 是更中性的块，适合做包裹或定位，不强制布局方向。

Flexbox 和 CSS Grid 怎么选？ 一维排布（横或竖）用 Flexbox，二维网格（行+列同时对齐）用 Grid。Bricks 里 Container 用 flex，想用 grid 在布局面板切到 Grid 即可。

用 Gap 还是 margin 控制间距？ 优先 Gap，它是容器级间距，不会出现外边距塌陷，也不用给最后一个元素手动清右边距。

子元素怎么单独控制对齐？ 在子元素自己的 Style 面板设 align-self / flex-grow，就能覆盖父容器的统一对齐。

为什么元素没按预期换行？ 多半是 flex-wrap 没开（默认 nowrap），或父容器宽度被固定死了；把 Wrap 打开、宽度设 100% 即可。

站长

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.

获取报价 →浏览全部教程