flex布局
<div classs=”box”> 容器
<span class=”item”></span> 项目
<span class=”item”></span> 项目
</div>
.box为容器
.box{
display:flex;（必填） 将div设置为flex布局，float、clear、vertical-align属性将失效
}
容器的属性有六个
flex-direction：决定主轴的方向（从左往右、从右往左、从下往上从上往下）
flex-wrap：项目都排在一条线上,如果一条轴线排不下，如何换行。
flex-flow：是flex-direction属性和flex-wrap属性的简写形式（默认值为 row nowrap）
justify-content：定义项目在主轴上的对齐方式（横着）
align-items：定义项目在交叉轴上的对齐方式（竖着）
align-content：定义多轴（多行）的对齐方式，如果只有一轴（就是只有一行），该属性不起作用
1.flex-direction：决定主轴的方向（排列方向从左往右、从右往左、从下往上从上往下）
.box{ }
1.flex-direction:row; (默认值)从左往右
2.flex-direction:row-reverse; 从右往左
3.flex-direction:column; 从上往下
4.flex-direction:column-reverse; 从下往上
2.flex-flow:项目都排在一条线上,如果一条轴线排不下，如何换行。
.box{ }
1.flex-warp:nowrap; (默认)不换行
2.flex-warp:wrap; 一行排不下，往下排列
3.flex-warp:wrap-reverse; 一行排不下，往上排列
3.flex-flow:是flex-direction属性和flex-wrap属性的简写形式（默认值为 row nowrap）
就是可以 决定排列方向 和 如何换行
.box{ }
flex-flow:<详情属性见flex-direction（排列方向）> || <详情属性见flex-wrap（如何换行）>
4.justify-content：定义项目在主轴上的对齐方式（横着）
.box{ }
1.justify-content:flex-start; (默认值)左对齐
2.justify-content:flex-end; 右对齐
3.justify-content:flex-center; 居中
4.justify-content:space-between; 两端对齐，项目之间的间隔想灯光
5.justify-content:space-around; 每个项目两侧距离相等（就像是每个都有内边距）
5.align-items:定义项目在交叉轴上的对齐方式（竖着）
.box{ }
1.align-items:flex-atart; 交叉轴的起点对齐（顶部对齐）
2.align-items:flex-end; 交叉轴的终点对齐（底部对齐）
3.align-items:center; 交叉轴的中点对齐（垂直居中对齐）
4.align-items:baseline; 项目的第一行文字的基线对齐（文字底部对齐）
5.align-items:stretch; (默认值)如果项目为设置高度或设置为auto，项目将占满整个容器
6.align-content:定义多轴（多行）的对齐方式，如果只有一轴（就是只有一行），该属性不起作用
.box{ } 默认：左对齐
1.align-content:stretch; (默认)轴线占满整个交叉轴（就是占满整个高度）
2.align-content:flex-atart; 与交叉轴的起点对齐（顶部对齐）
3.align-content:flex-end; 与交叉轴的终点对齐（底部对齐）
4.align-content:center; 与交叉轴的中点对齐（垂直居中对齐）
5.align-content:space-between;于交叉轴两端对齐，轴线之间的间隔平分布（上下对齐）
6.align-content:space-around; 每轴线上下两侧的间隔都相等，（像是上下设置的相等边距）
项目属性有六个(容器下面的元素 例：div里面的span)
1.order:定义项目的排列顺序，数值越小排列越靠前，默认为0；
2.flex-grow:定义属性的放大比例（占空间的份数，数字越大占的越多），默认为0
3.flex-shrink:定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小
4.flex-basis:定义了在分配多余空间之前，项目占据的主轴空间
5.flex:是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6.align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
1.order:定义项目的排列顺序，数值越小排列越靠前，默认为0；
.item{ }
1.oreder:<integer> 为int属性的值越小越靠前）
2.flex-grow:定义属性的放大比例（占空间的份数，数字越大占的越多），默认为0
.item{ }
1.flex-grow:<number> 数字越大占的空间越多，如果属性都为1，有一个为2，则2是1的两倍空间
3.flex-shrink:定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小
.item{ }
1.flex-shrink:<number> 数字越大站的空间越少
4.flex-basis:定义了在分配多余空间之前，项目占据的主轴空间
.item{ }
1.flex-basis:number; 一个长度单位或者一个百分比，规定灵活项目的初始长度。
2.flex-basis:auto; 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
3.flex-basis:intial; 设置该属性为它的默认值。请参阅 initial。
4.flex-basis: inherit; 从父元素继承该属性。请参阅 inherit。
5.flex:是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{ }
1.flex:none | [<flex-grow> <flex-shrink> ? || <flex-basis>];
6.align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{ }
1.align-self:auto; 默认值,元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
2.align-self:stretch; 元素被拉伸以适应容器。（就是占满整个高度）
3.align-self: center; 元素位于容器的中心(垂直居中)。
4.align-self:flex-start;元素位于容器的开头。(顶部)
5.align-self:flex-end元素位于容器的结尾。（底部）
6.align-self:baseline元素位于容器的基线上。（文字底部对齐）