Flex弹性布局
弹性布局也即flex布局，是目前网页的主流布局方式；解决了float布局的塌陷问题，也解决了inline-block元素的4px间隙问题；最关键的是flex布局天然适合多终端自适应环境。
特性
弹性布局（即flex布局）是当前最为流行的布局方式，这里的布局不是指循环列表布局（如有子元素循环需求，请使用table或grid布局），而是整个页面或局部的固定布局方式。
本框架的layout布局采用了flex布局，能满足用户大部分需求，其特性如下：
- 支持水平弹性布局和垂直弹性布局，使用
_row表示水平布局，使用_col表示垂直布局； - 支持常规的弹性布局，使用
_flex[-*]表示自由弹性布局，例如_row _flex-2表示该元素的flex属性为2； - 支持等分占比布局，使用
_own-*表示占用份额布局，例如_row _own-3表示水平方向24等分中占3份； - 支持等分布局，使用
_avg[-*]表示等分布局，例如_row _avg-3表示水平3等分； - 支持使用间隙，使用
_g[-*]表示弹性元素之间的间隙，例如_row _g-sm表示12px的间隙； - 支持在不同终端自动调整等分数量；
使用方法
使用_row+_flex组合类名即可构成水平弹性布局。
- 输出
- HTML
-
弹性内容弹性内容非弹性内容
-
使用_col+_flex组合类名即可构成垂直弹性布局。
- 输出
- HTML
-
弹性内容弹性内容非弹性内容
-
常用类名
| 类名 | 说明 | 举例 |
|---|---|---|
| _row | 水平弹性布局父容器类名。子元素的display样式都将失效。 | - |
| _col | 垂直弹性布局父容器类名。子元素的display样式都将失效。 | - |
| _flex | 弹性布局子容器类名，剩余空间均分。 | 例如有两个_flex的子元素分别是A和B，则A和B各占剩余空间50% |
| _flex-none | 将自己转为普通的非弹性元素 | 相当于对自己使用了flex:none样式 |
| _flex-* | 弹性布局子容器类名，*值范围为0~24，表示占用剩余空间份额。 | 例如有两个子元素分别是A:_flex-2和B:_flex-4表示A占剩余空间2/6，B占4/6 |
| _own-* | 弹性布局子容器类名，*值范围为0~24，表示占用总空间的份额。 | 例如_own-2表示其尺寸比例为2/24 |
| _avg-* | 弹性布局父容器类名，*值范围为1~24，表示均分父容器为几份。 | 例如_avg-4表示将父容器均分为4份，每个子元素占一份 |
间隙类名
弹性布局的间隙是以margin样式实现的，支持0~44px的间隙。
| 类名 | 说明 | 举例 |
|---|---|---|
| _g | 弹性子元素之间有1.4rem间隙(同_g-sm) | <div class="_row _g"></div> |
| _g-0 | 弹性子元素之间没有间隙 | <div class="_row _g-0"></div> |
| _g-1 | 弹性子元素之间有1px的间隙 | <div class="_row _g-1"></div> |
| _g-2 | 弹性子元素之间有2px的间隙 | <div class="_row _g-2"></div> |
| _g-3 | 弹性子元素之间有3px的间隙 | <div class="_row _g-3"></div> |
| _g-xxs | 弹性子元素之间有0.4rem的间隙 | <div class="_row _g-xxs"></div> |
| _g-xs | 弹性子元素之间有0.8rem的间隙 | <div class="_row _g-xs"></div> |
| _g-sm | 弹性子元素之间有1.4rem的间隙 | <div class="_row _g-sm"></div> |
| _g-md | 弹性子元素之间有2.2rem的间隙 | <div class="_row _g-md"></div> |
| _g-lg | 弹性子元素之间有2.8rem的间隙 | <div class="_row _g-lg"></div> |
| _g-xl | 弹性子元素之间有3.8rem的间隙 | <div class="_row _g-xl"></div> |
| _g-xxl | 弹性子元素之间有4.4rem的间隙 | <div class="_row _g-xxl"></div> |
自适应类名
弹性布局支持在不同终端下自动以均分列表形式显示。
| 类名 | 说明 | 举例 |
|---|---|---|
| _xxs-* | 手机端(width<=500)下一行（列）显示几个，*的值范围为1~24 | <div class="_row _xxs-2"></div>表示在手机端一行显示2个 |
| _xs-* | 普通平板端(500<width<=900)下一行（列）显示几个，*的值范围为1~24 | <div class="_row _xxs-2 _xs-3"></div>表示在平板端一行显示3个，在手机端显示2个 |
| _sm-* | 高清平板端(900<width<=1200)下一行（列）显示几个，*的值范围为1~24 | - |
| _md-* | 笔记本电脑端(1200<width<=1500)下一行（列）显示几个，*的值范围为1~24 | - |
| _lg-* | 桌面电脑端(width>=1500)下一行（列）显示几个，*的值范围为1~24 | - |
其他类名
还有一些不常用，但是有效的样式类。
| 类名 | 说明 | 举例 |
|---|---|---|
| _clip | 在终端自适应中（使用了_xxs-*~_lg-*）只显示第一行 |
<div class="_row _clip"></div> |
