display:flex 意思是弹性布局
![](https://i-blog.csdnimg.cn/blog_migrate/5bfa91fc3679f70f3296b8f43bb5e113.png)
首先flex的出现是为了解决哪些问题呢?
一、页面行排列布局
![](https://i-blog.csdnimg.cn/blog_migrate/c5d4972b4d0a36793b6846b051598e22.png)
像此图左右两个div一排显示
可以用浮动的布局方式
html部分
![](https://i-blog.csdnimg.cn/blog_migrate/53b8b91c19383186ddf73dd59433f4e8.png)
css部分
![](https://i-blog.csdnimg.cn/blog_migrate/2535bd893d7ded97102acb0c65ff1123.png)
这种布局有两个缺点
1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的,浏览器宽度变的过窄时,.right会被挤到下面
用display:flex布局,可以解决这两个缺点
刚吃的html部分不变,css部分
![](https://i-blog.csdnimg.cn/blog_migrate/3180d0fd203ec348f1b214cdfd3decbe.png)
父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同
![](https://i-blog.csdnimg.cn/blog_migrate/13b7fd6936ef7b7de8ffe36e3a7f0e24.png)
1:2分时
![](https://i-blog.csdnimg.cn/blog_migrate/8b064082aff9910b90477219ec53de0e.png)
同样分为3份时
![](https://i-blog.csdnimg.cn/blog_migrate/da0148e8d36d2e8c520e38708b25e3c1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c3aa12fbb56949dfed88ca551a4f1b98.png)
flex是所占的比例,这样的布局就方便很多。
二、div上下左右居中
我之前写过div上下左右居中的几种方法
其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex
![](https://i-blog.csdnimg.cn/blog_migrate/424fe03208977a7b2ade5608298ec041.png)
html部分
![](https://i-blog.csdnimg.cn/blog_migrate/4b09d55f3f396c666559b181663ce9d8.png)
css部分
![](https://i-blog.csdnimg.cn/blog_migrate/79005089058e07ae8002163fe7676089.png)
在未知div宽高时,用这种方法比较方便
这是我在使用flex布局时用到的两个比较常见又好用的例子