Flex 布局，可以简便，完整，响应式的实现各种页面布局
网页布局是CSS中一个重点应用，传统的解决方案是基于盒模型的，它依赖于 标准文档流、浮动布局 和 定位布局。但它在解决一些特殊布局的时候会很不方便，让人很头疼。
Flex 布局
Flex 是 Flexible Box 的缩写，即弹性布局，任何一个容器(块状元素或行内元素)都可以指定为Flex布局。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
基本概念
概念图.png
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴，水平轴和垂直的交叉轴。
属性
Flex container 的属性 ：
1. display : flex; // 将这个元素设置为弹性盒子
2. flex-direction : // 主轴方向，即项目的排列方向
. row
. row-reverse
. column
. column-reverse
3. justify-content : // 沿主轴的对齐方式
. flex-start 默认，左对齐
. flex-end 右对齐
. center 居中
. space-between 两端对齐，项目之间的间隔相等
. space-around 每个项目两侧的间隔相等
4. align-items : // 沿侧轴的对齐方式
. flex-start 起点对齐
. flex-end 终点对齐
. center 中点对齐
.baseline 项目的第一行文字的基线对齐
. stretch 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
5. align-content : // 子元素中文本沿侧轴的对齐方式（只有一行时无效）
. flex-start 起点对齐
. flex-end 终点对齐
. center 中点对齐
. space-between 两端对齐，间隔平均
. space-around 每根轴线两侧相等，轴线之间的间隔比轴线与边框的间隔大一倍
. stretch 默认值，轴线占满整个侧轴
6. flex-wrap : // 规定如果一条轴线排不下怎么换行
. nowrap 默认，不换行
. wrap 换行，第一行在上面
. wrap-reverse 换行，第一行在下面
7. flex-flow // flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
Flex item 的属性 :
1. flex-growth : // 伸展值, 默认为0，如果所有的都为1，则等分空间
2. flex-shrink : // 可接受的压缩值，默认为1，设为0则不缩小
3. flex-basis : // 元素默认的尺寸值
4. flex : // 以上三个值按顺序的缩写
5. order : // 项目的排列顺序。数值越小，排列越靠前，默认为0
6. align-self : // 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
示例 ：
结构.png
样式.png
效果如下 :
效果.png
该文章同步在 :
CSDN Blog： http://blog.csdn.net/levinhax/article/details/76652783
GitHub Page : https://levinhax.github.io/
