这一篇教程是正式使用Bricks前必看的内容！因为本篇文章会详细介绍几个最基础也是最常用到的功能。
Bricks中使用频率最高的是位于小部件面板顶部layout分类下的四个布局容器（section、container、block、div）以及这些容器所默认的Flexbox布局方式。我们搭建网页的时候基本离不开它们，所以我们必须在一开始就要熟悉它们。
容器 —— Section、Container、Block、Div四者的区别
这4个是bricks中布局的基本元素（小部件）。
首先直观感受下什么是Section、Container、Block。以腾讯视频网页为例：
面积最大的背景区域那层是Section、中间的主要内容区是Container，里面具体的内容块是Block。
Section、Container、Block、Div都是编辑器已经预设好参数的wrap容器。
我们来看看官方给它们的默认属性设定：
Section 元素的html标签默认是语义化标签<section>，剩下的Container、Block、Div元素的html标签默认都是<div>，说明在bricks团队的定位中，Section是具有语义化性质的容器，而后三者在定位上是同一个东西，只是编辑器默认设定的参数不一致而已。Section的默认宽度是100%，相同于整个浏览器窗口宽度。建议用于设置网页背景颜色或背景图片；Container 的默认宽度是固定的1100px，相当于网页的主体部分宽度为1100px；Block 推荐用作具体小部件的容器；默认宽度是100%，相当于Container有多宽Block就有多宽（在一行只有一个block的情况下）；Div 则是没有任何预设，完全需要自己设置参数，一般比较少用到，用Block替代就行。
一般情况下用Section、Container、Block这3个就足够了。
可视化展示区分：
注：整个画布的黄色部分是Section元素，绿色是Container元素，橘红色和黑色是Block元素，蓝色是Div元素。为更明显显示区别，对top和bottom的边距进行了设置。
结构面板区分：
html代码结构区分：
注：①代表section元素；②代表container元素；③④代表Block元素；⑤代表Div元素
根据html语义化方面的规范，建议将表达相同意思的内容放在一个Section内。一个Section内只需要一个Container，Container下面使用多个Block对具体小部件进行布局。建议的结构如下图：
如何使用FlexBox
什么是FlexBox?
按我的理解，FlexBox是一种布局的方式。非常灵活方便，中文译为 弹性盒子。
Bricks中的布局容器默认使用flexbox，所以我们必须要会使用。
详细的说明请查看：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
下面我会针对面板逐项进行说明：
Display：选择flex，才能以flexbo模式进行布局。Flex wrap：有3个属性（wrap，no wrap, wrap-reverse)。默认no warp，即“不换行”——所有内部的元素都将挤在一行。warp（换行），wrap-reverse（换行并顺序颠倒排列）。
Direction：排列方向，默认是纵向排列。图上从左往右分别是纵向排列、横向排列、顺序颠倒（可以与前两个同时选择）。
Align self：这个是flexbox布局中的某个元素的对齐方式，用在flexbox下属的元素上才会起作用。
Align main axis：主轴方向上的对齐。所谓主轴，指的是选择的Direction方向的轴线。一般从图例的标示中判断更直接。当我们Direction选择横向时（第二个图标），Align main axis的图标也会变动方向的。对齐方式示意如下：
Align cross axis：交叉轴（与主轴垂直的另一条轴线）的对齐方式。判断方式同上。对齐方式示意如下：
Column gap 和 Row gap：内部小部件的纵向和横向的间距。Order：同一级别容器之间的顺序。设置的数字越小，排序越靠前。
Flex grow : 将flexbox除去已有空间后的剩余空间进行分配，以剩余空间为整体，按照每个容器设定的flex-grow数值占整体的份额进行分配，内部容器的空间将自动扩张。默认值为0，即不会自动对内部容器进行扩张。
参考：https://blog.csdn.net/sdasadasds/article/details/121743266（第二个动画的flex-grow应该是flex，作者写错）Flex shrink ：原理类似于flex-grow，将超出flexbox空间范围的超额空间分配到flexbox中的容器中，按照每个容器设定的flex-shrink数值占超额宽度的份额进行分配，内部容器的空间将自动收缩。 默认值为1，即自动对内部容器进行收缩。Flex basis ：容器的宽度/高度值，作用和width/height一样，优先级高于width/height。当同时设定了width/height的值和flex-basis的值，浏览器会优先选择flex-basis的值进行渲染。默认值为auto，即按照width的值执行。
以上的 flex-grow、flex-shrink、flex-basis 不常用，其他的都是常用项。
掌握了Flexbox就相当于跨过了一座大山，后续建站会顺利许多。
之后bricks还会推出CSS grid的布局方式，grid比flexbox更高级，等编辑器有这功能后我将会更新。