flex弹性布局
简介
Flex是Flexible Box的缩写,意为"弹性布局",它给子元素之间提供了强大的空间分布和对齐能力;以便我们能够简便、完整、响应式的实现多种网页布局。
框架用.flex
定义弹性布局,为块显示,也可以内联显示.flex-inline
。
<div class="flex">弹性盒子</div> <div class="flex-inline">内联弹性盒子</div>
轴线
当使用弹性布局时,首先想到的是两根轴线:主轴和交叉轴。主轴由flex-direction定义,另一根轴垂直于它,默认主轴为水平方向,垂直方向为交叉轴;我们使用弹性布局的所有属性都跟这两根轴线有关。
主轴 起点 | 主轴 | 主轴 终点 | |
交叉轴起点 |
弹性项目
弹性项目
弹性项目
| ||
交叉轴 | |||
交叉轴终点 |
当弹性布局叠加.flex-column
为纵向为主轴时(即:flex-direction:column;
),则垂直方向为主轴,水平方向为交叉轴。
交叉轴 起点 | 交叉轴 | 交叉轴 终点 | |
主轴起点 |
弹性项目
弹性项目
弹性项目
| ||
主轴 | |||
主轴终点 |
为了演示,.flex
设置了padding,没有贴着边界,实际应用中为贴着边界显示。
反向
除上面个的两个方向外,还可以叠加.flex-reverse
样式,使弹性项目反方向显示。
<div class="flex"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-reverse"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div>
列反向
<div class="flex flex-column"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-column flex-reverse"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div>
换行
弹性布局默认为.flex-nowrap
在一行内显示,不换行,当叠加.flex-warp
时,溢出的弹性项目则换行显示。
<div class="flex flex-nowrap" style="width:15rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-wrap" style="width:15rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-column flex-nowrap" style="height:10rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-column flex-wrap" style="height:10rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div>
反向换行
水平方向时,反向换行从下到上顺序,当纵向时,反向换行则从右到左显示。
<div class="flex flex-wrap-reverse" style="width:15rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div> <div class="flex flex-column flex-wrap-reverse" style="height:10rem;"> <div>弹性项目1</div> <div>弹性项目2</div> <div>弹性项目3</div> </div>
主轴对齐
框架分别用主轴起点.flex-start
、主轴中间.flex-center
、主轴终点.flex-end
、主轴等比间距.flex-between
、主轴均分间距.flex-around
定义主轴的对齐方式;主轴为水平方向时,则从左到右对齐;主轴为垂直方向时,则从上到下对齐。
<div class="flex flex-start">...</div> <div class="flex flex-center">...</div> <div class="flex flex-end">...</div> <div class="flex flex-between">...</div> <div class="flex flex-around">...</div>
交叉轴对齐
框架分别用交叉轴起点.flex-items-start
、交叉轴中间.flex-items-center
、交叉轴终点.flex-items-end
、交叉轴第一行文字基线.flex-items-baseline
、交叉轴方向拉伸.flex-items-stretch
定义交叉轴的对齐方式;交叉轴为垂直方向时,则从上到下对齐;交叉轴为水平方向时,则从左到右对齐。
<div class="flex flex-items-start">...</div> <div class="flex flex-items-center">...</div> <div class="flex flex-items-end">...</div> <div class="flex flex-items-baseline">...</div> <div class="flex flex-items-stretch">...</div>
项目对齐
项目对齐为单独设置弹性项目的对齐方式,对齐的属性与交叉轴相同,框架分别用起点.flex-self-start
、中间.flex-self-center
、终点.flex-self-end
、第一行文字基线.flex-self-baseline
、拉伸.flex-self-stretch
定义项目的对齐方式。
<div class="flex-self-start">...</div> <div class="flex-self-center">...</div> <div class="flex-self-end">...</div> <div class="flex-self-baseline">...</div> <div class="flex-self-stretch">...</div>
多轴对齐
当弹性项目为换行存在多轴的情况下,可用轴起点.flex-content-start
、轴中间.flex-content-center
、轴终点.flex-content-end
、轴等比间距.flex-content-between
、轴均分间距.flex-content-around
定义多轴的对齐方式。
<div class="flex flex-wrap flex-content-start">...</div> <div class="flex flex-wrap flex-content-center">...</div> <div class="flex flex-wrap flex-content-end">...</div> <div class="flex flex-wrap flex-content-between">...</div> <div class="flex flex-wrap flex-content-around">...</div>
伸缩
当盒子还有空间,在弹性项目上使用.flex-grow
,则可以使项目拉伸,填充空间。
<div class="flex"> <div>弹性项目</div> <div class="flex-grow">弹性项目</div> <div>弹性项目</div> </div>
收缩
收缩由刚好与拉伸相反,即在不换行的情况下,空间不够要溢出时,可用.flex-shrink
使项目收缩。
<div class="flex"> <div class="w12">弹性项目</div> <div class="flex-shrink">弹性项目</div> </div>
填充
在使用.flex-fill
的项目上,实现自动伸缩。
<div class="flex"> <div class="flex-fill">这是第一个弹性项目的内容</div> <div class="flex-fill">弹性项目</div> <div class="flex-fill">弹性项目</div> </div>
自动边界
使用盒子模型的自动边界样式.margin
-位置-auto
,可使弹性项目左右自动边界显示。
<div class="flex"> <div>弹性项目</div> <div class="margin-left-auto">弹性项目</div> <div>弹性项目</div> </div> <div class="flex"> <div>弹性项目</div> <div class="margin-right-auto">弹性项目</div> <div>弹性项目</div> </div> <div class="flex"> <div>弹性项目</div> <div class="margin-center-auto">弹性项目</div> <div>弹性项目</div> </div>
上下自动边界
<div class="flex flex-column"> <div>弹性项目</div> <div class="margin-top-auto">弹性项目</div> <div>弹性项目</div> </div> <div class="flex"> <div>弹性项目</div> <div class="margin-bottom-auto">弹性项目</div> <div>弹性项目</div> </div> <div class="flex"> <div>弹性项目</div> <div class="margin-middle-auto">弹性项目</div> <div>弹性项目</div> </div>