一、在了解flex布局前首先要了解CSS常见的布局方式有哪些?
1、包括弹性布局、固定布局、流体布局、混合布局、绝对定位布局等
二、什么是弹性布局
1、弹性布局:flex,全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性
2、怎么使用flex
要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器,任何一个容器都可以指定成为Flex布局,但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。其子元素就会直接变成flex元素
3、flex的两根轴
在flex里存在两根轴:水平的主轴和垂直的交叉轴
三、弹性盒的常用属性
(1)flex-direction:设置主轴的方向,有4个值:row、row-reverse、column、column-reverse
row: (默认值)主轴为水平方向,起点在左端,从左至右排列;
![](https://i-blog.csdnimg.cn/blog_migrate/918434dc311c7b5a6933ca11e985914e.png)
row-reverse:主轴为水平方向,起点在右端,从右至左排列;
![](https://i-blog.csdnimg.cn/blog_migrate/436ad13944a62876d825d429cc09fecc.png)
column:主轴为垂直方向,起点在上沿,从上至下排列;
![](https://i-blog.csdnimg.cn/blog_migrate/c93a5d1c1f32932a93c452c83f114869.png)
column-reverse:主轴为垂直方向,起点在下沿,从下至上排列。
![](https://i-blog.csdnimg.cn/blog_migrate/e10ace9b9d0a668a5fa829777454aa03.png)
(2)flex-wrap: 控制子元素超出是否换行,有3个值:nowrap、wrap、wrap-reverse
nowrap:(默认值)不换行;若父元素装不下会缩小子元素的宽度,使子元素挤在一起
![](https://i-blog.csdnimg.cn/blog_migrate/d27eab0d94c21a6267ea49f4a97b777a.png)
wrap:换行,第一行在上方;
![](https://i-blog.csdnimg.cn/blog_migrate/24fbe77b17209be849c1d993774ad6c6.png)
wrap-reverse:换行,第一行在下方。
![](https://i-blog.csdnimg.cn/blog_migrate/94ae4a73a57096a2dcc685a82705237c.png)
(3)justify-content:设置弹性盒子中子元素元素在主轴(横轴)方向上的对齐方式,5个值:flex-start、flex-end、center、space-around、space-between(以下图全部为两端对齐,我加了margin:0 10px才会有缝隙)
flex-start:(默认值),左对齐(沿着主轴开始位置至末尾位置对齐);
![](https://i-blog.csdnimg.cn/blog_migrate/7eb75849480dee526507e2a760d5081a.png)
flex-end:右对齐(沿着主轴末尾位置至开始位置对齐);
![](https://i-blog.csdnimg.cn/blog_migrate/84e9c8d5526fd043bc596668ebde08c3.png)
center:居中对齐;
![](https://i-blog.csdnimg.cn/blog_migrate/3c3ce4814e45304402fdf7d04f974e64.png)
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍;
![](https://i-blog.csdnimg.cn/blog_migrate/116a2fc65ffc9f88aa4deee85fbc5ffd.png)
space-between: 两端对齐,项目之间的间隔都相等。
![](https://i-blog.csdnimg.cn/blog_migrate/02b67cb5a86400a2737a4a789d1c1480.png)
(4)align-items:定义项目在交叉轴上如何对齐。有5个值flex-start、flex-end、center、baseline、stretch
注意:align-items适用于项目在一行中,不适用于换行。
flex-start:交叉轴的起点对齐;
![](https://i-blog.csdnimg.cn/blog_migrate/efc062feed4db952ef093dd791db1115.png)
flex-end:交叉轴的终点对齐;
![](https://i-blog.csdnimg.cn/blog_migrate/b871968810a421bea37334c5d659e1ce.png)
center:交叉轴的中点对齐(可以理解为垂直居中);
![](https://i-blog.csdnimg.cn/blog_migrate/72c229fc4fe9b494bd0ed5172ad1f599.png)
baseline:项目的第一行文字的基线对齐;
![](https://i-blog.csdnimg.cn/blog_migrate/4d7d760cabf2c2edbd2e8a05b73f3f60.png)
stretch:(默认值),如果项目未设置高度或设为auto,将占满整个容器的高度。
![](https://i-blog.csdnimg.cn/blog_migrate/24f11e48478162341f9639fd16c91255.png)
持续更新中。。。。。。等实操后再来更新