弹性布局

用于创建响应式、灵活的布局，使子元素能够根据可用空间自动调整大小和排列。

• 适合设置元素之间的间距。
• 适合设置各种水平、垂直对齐方式。

一、属性

1. 外观

1）主轴对齐

主轴对齐提供 6 种对齐方式，默认为头部对齐。

• 头部：弹性布局内组件靠左排列。
  

• 中部：弹性布局内组件居中排列。
  

• 尾部：弹性布局内组件靠右排列。
  

• 两端对齐：组件分散在两端。
  

• 环绕对齐：均匀排列每个元素，每个元素周围分配相同的空间。
  

• 均匀对齐：均匀排列每个元素，每个元素之间的间隔相等。
  

2）辅轴对齐

辅轴对齐提供 5 种对齐方式，默认为拉伸占满。

• 头部：组件在 y 轴上靠上排列。
  

• 中部：组件在 y 轴上居中排列。
  

• 尾部：组件在 y 轴上靠下排列。
  

• 基准线对齐：所有子元素在其第一行文本的基线（文字排版的底线）对齐。
  

• 拉伸占满：对应 align-items: stretch，当组件高度（宽度）小于容器高度（宽度）时，可自动调整并等量增大，仍保持宽高比例约束。
  
  

3）排列方式

排列方式默认为水平排列。切换为垂直后，组件在 y 轴上从上到下排列。

4）间隔

间隔有两种设置方式：选择模式 和 手动输入模式。默认为选择模式 - 中。

• 选择模式：提供三种预设间距，默认是中。

  

  三种大小如下图所示：
  
  
  

• 输入模式：可自定义间隔的像素值，如设置间隔为 40px。
  

5）自动换行

开启自动换行后，当组件的宽度设置为固定值或百分比，且组件总宽度超过弹性容器宽度时，将自动换行排列。

例如，组件宽度为 45% 时的自动换行效果如下：

2. 状态

无特殊状态，详见 通用状态。

二、样式

无特殊样式配置，详见 通用样式。

三、常见使用场景

1. 卡片布局

在产品展示页面，使用 Flex 布局可将多个卡片并排显示，并根据屏幕宽度自动调整排列方式。

2. 表单布局

在表单中使用 Flex 布局，可实现标签和输入框的灵活对齐，使表单更整洁美观。

3. 图片展示

在图片展示页面中，Flex 布局可实现响应式网格，确保图片在不同设备上良好显示。

4. 导航条

使用 Flex 布局可轻松创建水平或垂直导航菜单，确保菜单项均匀分布，且在不同屏幕上具有良好的可读性。