Flex弹性布局

2024-06-19 00:15:38首发，3个月前更新

弹性布局也即flex布局，是目前网页的主流布局方式；解决了float布局的塌陷问题，也解决了inline-block元素的4px间隙问题；最关键的是flex布局天然适合多终端自适应环境。

特性

弹性布局（即flex布局）是当前最为流行的布局方式，这里的布局不是指循环列表布局（如有子元素循环需求，请使用table或grid布局），而是整个页面或局部的固定布局方式。

本框架的layout布局采用了flex布局，能满足用户大部分需求，其特性如下：

1. 支持水平弹性布局和垂直弹性布局，使用_row表示水平布局，使用_col表示垂直布局；
2. 支持常规的弹性布局，使用_flex[-*]表示自由弹性布局，例如_row _flex-2表示该元素的flex属性为2；
3. 支持等分占比布局，使用_own-*表示占用份额布局，例如_row _own-3表示水平方向24等分中占3份；
4. 支持等分布局，使用_avg[-*]表示等分布局，例如_row _avg-3表示水平3等分；
5. 支持使用间隙，使用_g[-*]表示弹性元素之间的间隙，例如_row _g-sm表示12px的间隙；
6. 支持在不同终端自动调整等分数量；

使用方法

使用_row+_flex组合类名即可构成水平弹性布局。

使用_col+_flex组合类名即可构成垂直弹性布局。

常用类名

类名	说明	举例
_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.4rem的间隙	<div class="_row _g-md"></div>
_g-lg	弹性子元素之间有3.2rem的间隙	<div class="_row _g-lg"></div>
_g-xl	弹性子元素之间有4rem的间隙	<div class="_row _g-xl"></div>
_g-xxl	弹性子元素之间有4.8rem的间隙	<div class="_row _g-xxl"></div>

自适应类名

弹性布局支持在不同终端下自动以均分列表形式显示。

类名	说明	举例
_xxs-*	手机端中一行（列）显示几个，*的值范围为1~24	<div class="_row _xxs-2"></div> 表示在手机端一行显示2个
_xs-*	普通平板端中一行（列）显示几个，*的值范围为1~24	<div class="_row _xxs-2 _xs-3"></div> 表示在平板端一行显示3个，在手机端显示2个
_sm-*	平板端横屏中一行（列）显示几个，*的值范围为1~24	-
_md-*	高清平板端中一行（列）显示几个，*的值范围为1~24
_lg-*	桌面电脑端中一行（列）显示几个，*的值范围为1~24	-
_xl-*	2k桌面电脑端中一行（列）显示几个，*的值范围为1~24	-
_xxl-*	4k桌面电脑端中一行（列）显示几个，*的值范围为1~24	-
_hh-*	手持移动设备中一行（列）显示几个，*的值范围为1~24	-
_tb-*	平板设备中一行（列）显示几个，*的值范围为1~24	-
_dt-*	桌面设备中一行（列）显示几个，*的值范围为1~24	-

其他类名

还有一些不常用，但是有效的样式类。

类名	说明	举例
_clip	在终端自适应中（使用了_xxs-*~_lg-*）只显示第一行	<div class="_row _clip"></div>