html5弹性布局display:flex;的具体用法

首先我们来了解一下html5种flex的定义：

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

在我们开发网站的时候，碰见如下图两边对齐的时候回很头疼，不管是用class取消最后或者第一个的margin值还是用first-child或者last-child去做的时候都有一定的弊端，

在CSS3FLEX出现后，这种情况解决方法的福音来了，只需要两步已经效果即可实现，下面让我们来看一下

步骤1：在父集容器添加display:flex;（为了得到更好的支持请加私有前缀）

步骤2：在子集添加flex:1即可

注意红线处，显示效果：如下

我们发现li平均分布在容器中，是不是很方便？

那么如果我们想让第三个li现实等于别的li的2倍宽度呢？相信你已经知道了，只需要写上

li:nth-child(3){flex:2;}

即可实现，flex如此强大，虽然兼容性还不是那么完美，但是目前已经广泛应用在移动端设备上了。

我们再来了解一下flex的其他一些概念：

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。