display:flex的常规用法

前言

display:flex的意思是弹性布局，又被称为弹性盒子。
这种css样式主要解决了哪些问题呢，本文使用display:flex描述一下其基本用法。

01.png

一、页面行排列布局

02.png

像此图左右两个div一排显示，可以用浮动的布局方式
html部分

03.png

css部分

04.png
这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局；
2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面。
用display:flex布局，可以解决这两个缺点
前面的html部分不变，css部分

05.png

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素，占的比例相同。

06.png
1:2分时
07.png

同样分为3份时

08.png
09.png

flex是所占的比例，这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法，其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex。

10.png

html部分

11.png
css部分
12.png

在未知div宽高时，用这种方法比较方便，这是我在使用flex布局时用到的两个比较常见又好用的例子