基本概念
flex 盒模型是 CSS3 中全新的布局模型,其子元素拥有强大的空间分布和对齐能力。
flex 盒模型示意图:
![9d722976934b24a66a3374020838a6e3.png](https://i-blog.csdnimg.cn/blog_migrate/ad38bde55e112e134fd5d2ad7c371a8d.png)
容器:一个元素的 display 设置为 flex 或 inline-flex,就会创建一个 flex 容器。
项:容器的直接子元素被称为 flex 项,项会依据 flex 盒模型的规则进行布局。
主轴:排列项的轴被称为主轴,默认情况下,项由主轴起点延伸至终点进行排列。
交叉轴:垂直于主轴的轴被称为交叉轴,交叉轴同样具有方向性。
*display 取值 flex ,在流布局中,生成块级别的容器;取值 inline-flex 在流布局中,生成内联级别的容器。
*容器中,float 和 clear 不会对项产生浮动和清除效果,vertical-align 对于项也不会产生效果。
使用方法
把一个元素的 display 属性值设置为 flex 或者 inline-flex,那么,其直接子元素就会自动成为 flex 项。
例子:
.flex-container { display: flex; } 或者 .flex-container { display: inline-flex; }
应用在容器上的属性
flex-direction
指定主轴的方向。
- row:默认值,主轴为水平方向,并且主轴起点为左端,因此项从左至右排列
- row-reverse:主轴为水平方向,但主轴起点为右端,因此项从右至左排列
- column:主轴为垂直方向,并且主轴起点为上端,因此项从上至下排列
- column-reverse:主轴为垂直方向,但主轴起点为下端,因此项从下至上排列
![f9456f65bc8fa8b6da70bfa196d99a39.png](https://i-blog.csdnimg.cn/blog_migrate/6e466cf275fc48b263a24f1f8eaed345.png)
flex-wrap
指定项在必要的时候是否可以拆行。
- nowrap:默认值,项不拆行
- wrap:项在必要的时候可以折行,并且第一行位于上方
- wrap-reverse:项在必要的时候可以折行,但第一行位于下方
![da38fdc1f1f97856b041c5e3497a0fcc.png](https://i-blog.csdnimg.cn/blog_migrate/e7097c154aeb6dfc70e5fa5b58bbbd56.png)
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,默认值为 row nowrap。
justify-content
指定项在主轴上的位置。
- flex-start:默认值,项在主轴的起点位置堆叠
- flex-end:项在主轴的终点位置堆叠
- center:项在主轴的中心位置堆叠
- space-between:第一个项与最后一个项分别位于主轴的起点与终点位置,并且以相等的间距排列
- space-around:项左右两侧均以相等的间距排列,因此,项与项的间距会比项与主轴起点、终点的间距大一倍
- space-evenly:项与项、项与主轴起点和终点位置,均以相等的间距排列
![e7d42cbb30ae4ea395825ef5cd15f386.png](https://i-blog.csdnimg.cn/blog_migrate/25289e5b365d1820050a4e18315eb7df.jpeg)
align-items
指定项在交叉轴上的对齐方式。
- stretch:默认值,如果项未设置高度或高度值为auto,项会被拉伸以填充容器高度
- flex-start:项在交叉轴的起点位置对齐
- flex-end:项在交叉轴的终点位置对齐
- center:项在交叉轴的中心位置对齐
- baseline:基线对齐
![d81552beeda5f573aae2b091b3aa48f9.png](https://i-blog.csdnimg.cn/blog_migrate/e644a9b7c75621f2e0833e630a61463b.jpeg)
align-content
指定项在交叉轴上的对齐方式,但前提是容器内部存在多行的项。
- stretch:默认值,如果容器的剩余空间是正数,各行将均分(可以理解为行高相同);否则各行将在交叉轴的起点位置堆叠
- flex-start:各行在交叉轴的起点位置堆叠
- flex-end:各行在交叉轴的终点位置堆叠
- center:各行在交叉轴的中心位置堆叠
- space-between:第一行与最后一行分别位于交叉轴的起点与终点位置,并且以相等的间距排列
- space-around:各行上下均以相等的间距排列,因此,行与行的间距会比行与交叉轴起点、终点的间距大一倍
- space-evenly:行与行、行与交叉轴起点和终点位置,均以相等的间距排列
![698941ebb618b785ba577fa8f86103ff.png](https://i-blog.csdnimg.cn/blog_migrate/70efe69d05cc74092d541b691d241871.jpeg)
![c0ca0bf3ac09add2354c7da02ff9e8b5.png](https://i-blog.csdnimg.cn/blog_migrate/b99c46a28f71161570e7e1c4cff31ef7.png)
应用在项上的属性
flex-grow
指定项的扩展规则:如果主轴上的剩余空间是正数,应该分配多少给该项;
值为数字,负值无效;
默认值为0,表示即使存在剩余空间,也不进行分配。
![b0a9bd488d22fc478ca2552944ad3221.png](https://i-blog.csdnimg.cn/blog_migrate/5cbeab054a08e04629c67e5c7e442796.png)
flex-shrink
指定项的收缩规则:如果主轴上的剩余空间是负数,该项的收缩比例是多少;
值为数字,负值无效;
默认值为1,表示当剩余空间为负数时,所有项进行等比例收缩;
值为0时,不进行收缩。
![14bb7751950b6d3efc94dc9c1ba910b4.png](https://i-blog.csdnimg.cn/blog_migrate/7ebbcf431ab7cae96e1831ca9c717d4c.png)
flex-basis
指定项在主轴上占据的空间大小,默认值为 auto,表示项的空间大小具有包裹性,但最大不会超过其容器。
![ed29745c2312c42f4e673678d88cf152.png](https://i-blog.csdnimg.cn/blog_migrate/e0101ea0811a0d7ed8fab0f995c9ae7e.png)
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的复合属性,默认值为 0 1 auto。
order
指定项在主轴上的视觉顺序 ;
值为数字,默认值为0,数字越小,排列越靠近主轴起点位置;
相同值的项依据在源码中出现的顺序进行排列。
![8fae49dd959702b54023685075ff14cb.png](https://i-blog.csdnimg.cn/blog_migrate/dd585d425dbf1b92cf34016ac4b1da2e.png)
align-self
指定单个项在交叉轴上的对齐方式,可覆盖 align-items 属性值;
默认值为 auto,表示继承容器的 align-items 值;
其他值与 align-items 值效果一致。
![7396f29b893d95b75118672f57fbb1cc.png](https://i-blog.csdnimg.cn/blog_migrate/766006b2844bb07fd52f2602c49386ca.png)