选中容器，在右侧的设置栏会出现 “自动布局“ 栏目，自动布局用于控制其子元素的排布方式。

默认情况的容器没有开启”自动布局“，我们称之为”自由布局“，在这个布局模式下，其子元素可以任意拖动到任何位置： 

自由布局在网页设计中不经常使用，因为自由布局对响应式不友好，只会在局部（比如一个复杂的 icon）小范围使用。

什么是 ”响应式设计“？

响应式 Web 设计是一种能够适应不同设备和屏幕尺寸的网站设计方法，它可以提供一致的用户体验，并确保网站内容在任何设备上都能够完整显示和易于使用。

在网页设计中用得更多的是“自动布局“，也就是 CSS 概念中的流式布局，在流式布局中所有子元素会从左到右（或从上到下）依次排列，这也是响应式设计的基础。

打开自动布局之后，自动布局栏目会出现许多选项，现在我们详细介绍每个选项的作用

弹性布局

自动布局分为两种，即”弹性布局“和”网格布局“，我们先说”弹性布局“的使用场景以及每个选项的作用。

“弹性布局“ 是最常用的布局方式，其可以方便的控制子元素大小，例如下图中的左右布局，左侧固定为 120px，右侧填充满整个窗口的布局方式就需要用到弹性布局：

设置项说明：

方向（Direction）

选项：水平、垂直

分布（Distribute)：元素在主轴上的对齐方式

什么是主轴：如果是水平布局，主轴为 X 轴；如果是垂直布局，主轴为 Y 轴；

以下的示例以水平布局为例

对齐（Align)：元素在交叉轴上的对齐方式

什么是交叉轴：和主轴互相垂直的轴就是交叉轴，即 如果是水平布局，交叉轴为 Y 轴；如果是垂直布局，交叉轴轴为 X 轴；

以下的示例以水平布局为例（控制 Y 轴方向上的对齐方式）

间隔（Gap）

间隔用于控制每个子元素之间的距离

换行（Wrap）

控制当子元素宽度超过父级时元素是否自动换行。

更多参考资料：《通过动图学习 CSS Flex》

网格布局

网格布局用于做一些更复杂的错位的布局

设置项说明：

列数（Columns）：分为几列

行数（Rows）：分为几行

间隔（Gap）：格子之前的间隔

高级布局

高级布局用于更为特殊的场景，通常不会使用到，这里简单描述下各个功能项的作用，如果您有疑问可以直接在 ”联系我们“ 页面添加人工客服，我们为您在线解答。

• 列数（Columns）auto：一般搭配子项固定宽度，父容器的宽度自适应的情况
• 宽度（Width）：表示网格的宽度设置
  • 最小（min）：表示网格的宽度最小为50px；
  • 固定：表示固定宽度
• 高度（Height）：表示网格的高度设置
  • 填充容器（Fill container）表示网格的高度填充容器的高度；
  • 固定：表示固定高度；
  • 适配内容：表示网格的高度为内容的高度
• 对齐（Align）：子元素在容器里面的水平位置(左中右)，比如下面的例子中，网格容器一共分为 6 列，子元素只有 3 个，一共占 3 列，就可以通过设置对齐方式更改子元素得水平位置。

• 排列顺序（AutoFlow）：设置容器下的子容器排列顺序

Grid 布局下的子项 - 跨度

当选中网格布局下的子项，会有特殊的尺寸设置 - 跨度：控制自己跨几行或几列。