1、flex的出现
网页布局是css的一个重要应用。布局的传统解决方案，基于盒模型，依赖于 display 属性、position 属性、float 属性。对于那些特殊的布局非常不方便，比如 垂直居中 就不容易实现。
所以提出了一种新的方案-flex布局，可以简便、完整、响应式地实现各种页面布局。
2、flex布局：display：flex；
任何一个容器都可以指定为flex布局
display:flex;行内元素也可以使用flex布局
display:inline-flex;注意：设为flex布局以后，子元素的 float、vertical-align、clear 属性将失效。
3、基本概念
容器：采用 flex 布局的元素，称为 flex 容器，简称“容器”；
项目：它的所有子元素自动成为容器成员，成为 flex 项目，简称“项目”；
容器默认存在两根轴：水平的主轴（main axis）、垂直的交叉轴（cross axis）；
主轴的开始位置（与边框的交点）叫做 mian start；结束位置叫做 main end；
交叉轴的开始位置叫做 cross start；结束位置叫做 cross end；
项目默认沿主轴排列（左对齐）。单个项目占据的主轴空间叫做 main size；占据的交叉轴空间叫做 cross size；
项目默认没有间隔（边距）；项目默认不改变项目宽度（即本来宽度）；项目默认改变项目高度（如果项目没有显式指定高度，就将占据容器的所有高度。）
4、容器属性（按工作中常用程度排列）
（1）项目在主轴的排列方式（默认左对齐、无间隔）
.box{
display:flex;
justify-content:flex-start; /*-默认轴起点对齐-*/
justify-content:flex-end; /*-轴终点对齐-*/
justify-content:center; /*-居中-*/
justify-content:space-between; /*-两端对齐-*/
justify-content:space-around; /*-均匀对齐（每个项目两侧间隔相等）-*/
}（2）项目在交叉轴的排列方式（默认高度被拉伸）
.box{
display:flex;
align-items:stretch; /*-默认值,如项目未设置高度或设置为auto,将占满整个容器的高度-*/
align-items:center; /*-垂直居中,不拉伸-*/
align-items:flex-start; /*-交叉轴起点对齐-*/
align-items:flex-end; /*-交叉轴终点对齐-*/
align-items:baseline; /*-项目第一行文字的基线对齐-*/
}（3）主轴的方向（默认水平方向从左到右）
.box{
display:flex;
flex-direction:row; /*-主轴的方向,即项目的排列方向,默认水平方向,左对齐-*/
flex-direction:row-reverse; /*-主轴为水平方向，从右到左-*/
flex-direction:column; /*-主轴为垂直方向,从上到下-*/
flex-direction:column-reverse; /*-主轴为垂直方向,从下到上-*/
}（4）项目过多，如何换行
.box{
display:flex;
flex-wrap:nowrap; /*-默认值,不换行-*/
flex-wrap:wrap; /*-换行,第一行在上方-*/
flex-wrap:wrap-reverse; /*-换行,第一行在下方-*/
}（5）flex-flow（主轴方向，如何换行的简写形式）
.box{
display:flex;
flex-flow:row nowrap; /*-主轴方向为水平从左到右,项目过多不换行-*/
flex-flow:column wrap; /*-主轴方向为垂直从上到下,项目过多换行,第一行在上方-*/
…
}
（6）多根轴线的排列方式（如果项目只有一根轴线，该属性不起作用）
.box{
display:flex;
align-content:stretch; /*-默认值,轴线占满整个交叉轴-*/
align-content:flex-start; /*-交叉轴的起点对齐-*/
align-content:flex-end; /*-交叉轴的终点对齐-*/
align-content:center; /*-交叉轴的中点对齐-*/
align-content:space-between; /*-交叉轴两端对齐,轴线之间的间隔平均分布-*/
align-content:space-around; /*-每根轴线两侧的间距都相等-*/
}5、项目属性（按照工作中常用程度排列）
（1）flex-grow 项目的拉伸比例
.box{
display:flex;
}
.item{
flex-grow:0; /*-默认值,项目本来的宽度-*/
flex-grow:1; /*-如果项目flex-grow都为1,则等分剩余空间（如果有的话,因为有空间不足的情况）-*/
flex-grow:1; /*-如果其中一个项目flex-grow为1,其余为默认,则该为的项目占据剩余所有空间-*/
flex-grow:2; /*-如果其中一个项目flex-grow为2,其余为1,则该为2的项目空间是为1的2倍-*/
}（2）align-self 项目在交叉轴的上对齐方式
.box{
display:flex;
}
.item{
align-self:auto; /*-默认值,继承容器垂直方向的对齐方式-*/
align-self:stretch; /*-拉伸-*/
align-self:flex-start flex-end center baseline; /*-可能值-*/
}（3）align-basis 在分配多余空间之前，项目占据的主轴空间（main size）
浏览器根据这个属性，计算主轴是否有多余空间
.box{
display:flex;
}
.item{
flex-basis:auto; /*-默认值,项目本来宽度-*/
flex-basis:100px; /*-数值、百分比,项目将占据固定空间-*/
}（4）flex-shrink 项目的收缩比例（数值不能为负）
.box{
display:flex;
}
.item{
flex-shrink:1; /*-默认值,项目本来大小-*/
flex-shrink:1; /*-项目该属性都为1，空间不足时将等比例缩小-*/
flex-shrink:0; /*-项目不收缩-*/
}（5）order 项目的排列顺序
.box{
display:flex;
}
.item{
order:0; /*-默认值,数值越小,排列越靠前-*/
order:-1 /*-该项目要排在order为0的项目前面-*/
}（6）flex（flex-grow、flex-shrink、flex-basis 的简写形式）
.box{
display:flex;
}
.item{
flex:0 1 auto; /*-默认值,不拉伸 可收缩 本来大小-*/
flex:auto; /*- 1 1 auto; 拉伸为1,可收缩,本来大小-*/
flex:none; /*- 0 0 auto; 不拉伸,不压缩,本来大小-*/
}