CSS3中Flex弹性布局该如何灵活运用？

前言

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: