本文介绍Bricks Builder Layout布局如何使用。了解Bricks Builder的布局可以帮助我们更好的设计和布局网站内容。
Bricks画布：即在Bricks Builder编辑状态下可视化编辑的区域。
Bricks Builder Layout布局元素有哪些？
从 1.5 版开始，Bricks 提供四种布局元素：Section、Containner、Block、Div。
我们可以在Bricks Builder画布的元素列表中看到这些布局元素。
我们可以通过一张图来简单理解这些布局元素的主要作用：
Bricks的布局提供一个有层次结构的布局方式，而Elementor是通过Flexbox容器以及Flexbox容器嵌套来实现的布局。两者本质上是都是通过Flexbox实现布局，但是Bricks在元素设定上帮你做好了层次结构规划。
Section是一个全宽的最外层布局，Containner是一个嵌套在Section内部的布局，它的宽度和你设置内容宽度一致，Block是一个区块可以放在Section或者Containner内部，DIV相对灵活，你可以放在任何地方。
1、Section（部分）
通常用它来划分内容模块，比如为方便用户阅读和理解我们会把页面拆分成一块一块的像段落一样的，那么一个段落就使用一个Section，所有段落中展示的内容都放在这个Section当中即可。
当你添加一个新的Section到画布中
2、Containner（容器）
3、Block（块）
4、DIV（分区）
Bricks Builder Layout布局元素的属性设置
Bricks Builder Layout布局元素的属性设置在元素的的Content标签中设置。
我们先通过一个表格来快速了解布局元素的一些重要属性。
| 元素名称 | Section | Containner | Block | DIV |
| 默认HTML标签 | section | div | div | div |
| 默认Display | flex | flex | flex | block |
| 默认宽度 | 100% | 内容宽度 | 100% | — |
| 在哪里使用 | 根级 | Section内部 | Section/Containner内部 | 任何地方 |
对照上面的表格来理解下面的内容。
1、HTML Tag设置
你可以切换当前布局元素的HTML Tag，Bricks Builder提供9个可选的HTML Tag。关于HTML Tag不同标签的含义个功能请访问网站了解。
通常情况下，我们使用其默认的HTML标签即可。
2、Display设置 *
Bricks Builder的布局元素中，默认的Display设置为Flex。Display是一个CSS属性，用于设置元素的展示的渲染框架类型。
Flex：一种布局方式可以简便、完整、响应式地实现各种页面布局，通常也是我们最常用的布局方式。
Block：此元素将显示为块级元素，此元素前后会带有换行符。
Inline-Block：此元素将显示为行内块元素。
Inline：此元素会被显示为内联元素，元素前后没有换行符。
None：不显示该元素。选择该选项之后将不需要再设置任何属性值。
3、Display:Flex的属性设置（Flexbox）
1）Flex Wrap设置
Flex Wrap是一个CSS属性，设置让Flex元素在必要的时候拆行。
No Warp：默认值，元素会被显示为内联元素，元素不换行。
Warp：规定灵活的项目在必要的时候拆行或拆列。
Wrap Reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
2）Direction设置
Direction用于设置元素中内容的排列方向。
有三个选项：竖向、横向、反向交换。
其中竖向和横向二选一，方向交换在横向或竖向的基础上进行设置。
比如：你讲布局元素设置为竖向，同时选中反向交换，那么原来在下面的内容将会被排到上面，展示的顺序会反过来。
3）Align 设置（align-self属性设置）
Align (section)，不同的布局元素括号中的内容不同，这个属性实际上是Flexbox的align-self属性。
align-self的意思是以自己和父级包裹为参照进行对齐。
下图通过在Section中添加了4个Containner，并设置Containner的align-self属性所展示的结果。
如果一个布局元素已经属于根级别的，它的外部没有其他布局元素嵌套了，那么align-self属性的设置将不会生效。
4）Align main axis设置（justify-content属性设置）
Align main axis的意思是主轴对齐，它其实就是flexbox的justify-content属性。
他是让布局元素内部的元素以自己的竖向的中心轴以及竖向的边缘为参照的对其设置。
通过属性选项的图标就能够理解，不同的设置所产生的效果。
5）Align cross axis设置（align-items属性设置）
Align cross axis的意思是交叉轴对齐，它其实就是flexbox的align-items属性。
他是让布局元素内部的元素以自己的横向的中心轴以及横向的边缘为参照的对其设置。
通过属性选项的图标就能够理解，不同的设置所产生的效果。
6）Column gap（列间距）设置
用于设置横向布局中列之间的距离。
7）Row gap（行间距）设置
用于设置竖向布局中，行之间的距离。
8）Order（排序）设置
用于改变同一个布局内部元素的排列顺序，通过数字大小进行排列。
9）Flex Grow、Flex shrink和Flex basis设置
Flex Grow：灵活增长的意思，设置值为2，并在Flex basis基础值200PX，代表宽度增长为200px*2=400px。
Flex shrink：灵活收缩的意思，设置值为2，并在Flex basis基础值200PX，代表宽度缩小为200px/2=100px.
Flex basis：灵活变化的基数设置。
Flex Grow和Flex shrink需要和Flex basis一配合使用，并且设置后一个容器中的所有元素缩放合计，是受限于他们所在的容器的大小的。
4、Display:Block/Inline-Block/Inline的属性设置
Display:Block/Inline-Block/Inline的属性设置和Flexbox不一样，它们的属性设置项目比较少。
只有Order、Flex Grow、Flex shrink和Flex basis设置。
DIV默认的Display设置是Block，当然你可以修改DIV的Display设置为Flex，对应选项的理解和设置可以参考上文Flexbox的设置。
布局元素的Style设置
Bricks Buider中所有的布局元素和元素都有Style设置，你可以通过切换到元素的Style标签选项卡，进行设置。
