解决前端一切布局的神器：CSS3 Flex弹性布局 _CSS3

前言Flex（Flexible Box），意为”弹性布局” 。“弹性”，顾名思义，就是具有弹簧的特性，能够自由的伸缩（有点自适应的意思）。

文章插图

其实Flex并不是最近才出现的，而是早在十年前它就被提出。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

文章插图

Flex布局如何使用？任何一个容器都可以指定为Flex布局
.box{display: flex; }行内元素也可以使用Flex布局
.box{display: inline-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容器属性一、flex-direction：决定项目（item）的排列方向
flex-direction有四个值：
1、row（默认值）：主轴为水平方向，起点在左端。
2、row-reverse：主轴为水平方向，起点在右端。
3、column：主轴为垂直方向，起点在上沿。
4、column-reverse：主轴为垂直方向，起点在下沿。
上方那个示例图，我们稍稍变阵一下，主轴设置为垂直方向，就会出现下图布局。
示例：

文章插图

还可以设置主轴为垂直方向，起点在下沿。
示例：

文章插图

是不是觉得以后布局就用他（Flex）了？
二、flex-wrap
默认情况下，item都排在一条线（又称”轴线”）上。flex-wrap属性定义了，如果一条轴线排不下，item的换行方式。
示例：

文章插图

flex-wrap有三个值：
1、nowrap（默认）：不换行
2、wrap：换行，第一行在上方。
3、wrap-reverse：换行，第一行在下方。
示例：

文章插图

三、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 。
.box { flex-flow: <flex-direction> <flex-wrap>;}示例：

文章插图

四、justify-content：定义了item在主轴上的对齐方式
justify-content有五个值：
1、flex-start（默认值）：左对齐
2、flex-end：右对齐
3、center：居中
4、space-between：两端对齐，项目之间的间隔都相等。
5、space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
示例：