# 1 用户场景 Flex布局是2009年W3C提出了一种新的方案。Flex是Flexible Box的缩写，意思就是弹性布局。苍穹平台布局方案主要使用了Flex布局，并且提供了可视化方案，帮助用户高效实现强大、灵活布局。  要理解flex布局属性需要了解基本基本概念： **容器： 采用Flex布局的元素，称为Flex容器，后面简称“容器”， 它的子元素就是就是容器成员，也叫子容器。** **Flex布局使用类似二维坐标系来控制子元素（子容器）在主轴、交叉轴上的对齐方向、缩放比例、排列顺序**...  # 2 操作步骤 ## 2.1 快速布局使用 1 选中容器，点击‘“控件属性”面板中的【布局】 2 从“快速布局”图例中选择需要布局方案，布局面板底部也提供效果预览图。根据实际展示效果，可以做进一步调整。 tips: 箭头代表的是布局的方向，由上至下代表垂直布局，从左到右代表水平布局。红线代表的是对齐的位置，靠左、居中、靠右等等。  ## 2.2 高级设置  **【水平布局】** 属性决定主轴的方向：水平方向，即子元素的排列方向为水平方向。 **【垂直布局】** 属性决定主轴的方向：垂直方向，即子元素的排列方向为垂直方向。 **【多行多列】** 当子容器占用空间超出父容器时，决定是否换行。 【**水平方向对齐方式**】属性定义了项目在主轴上的对齐方式, 可选值：flex-start（起点对齐） | flex-end（终点对齐） | center（居中） | space-between（两端对齐） | space-around（间隔相等） 【**垂直方向对齐方式**】属性定义项目在交叉轴上如何对齐, 可选值：flex-start | flex-end | center | baseline | stretch 【**多行垂直方向对齐方式**】属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。可选值： flex-start | flex-end | center | space-between | space-around | stretch **属性设置示例效果：** 设置水平（主轴）方向的对齐方式  设置垂直（侧轴）方向的对齐方式   【**扩展比率**】定义子容器占剩余空间的比率，即当容器有剩余空间，子容器的大小和小于父容器的大小时，容器里的子容器大小会扩大，而扩大的大小取决于扩展比率的大小。 扩展比率默认为1，最大为5。 【**压缩比率**】是容器的子容器按照一定的比例缩小，默认为1，前提是容器不能换行，就是当容器内存主轴方向在空间不足，子容器的大小之和超过容器的大小时，父容器里的子容器将按照设置好的比例进行缩小。 压缩比率默认为1，最大为4。 如果设置为0，子项宽度和超出容器大小，子项的大小不会发生变化，而父容器为了显示所有子项所以会出现滚动条。 # 3 进阶学习 对前端CSS布局感兴趣，想进一步探究Flex布局原理的同学，可以在chrome中，F12打开【检查】面板，选中Flex元素，查看可视化布局背后的CSS属性值。