前言
flex是我们常用的布局方式。flex可以成为容器，所以它里面的子元素自动成为容器成员。
在flex容器中默认存在两条轴，水平主轴和垂直交叉轴
flex有一些属性控制布局的方向、对齐方式等
flex-diretion：决定主轴方向
display:flex;
// 默认情况，主轴为水平方向，起点在左端
flex-diretion: row;
// 主轴水平方向，起点在右端
flex-diretion:row-reverse;
// 主轴为垂直方向，起点在上沿。
flex-diretion:column;
// 主轴为垂直方向，起点在下沿。
flex-diretion:column-reverse
flex-warp：日如何换行
// 默认，不换行。
flex-warp: nowrap;
//换行，第一行在上方
flex-warp: wrap;
// 换行，第一行在下方。
flex-warp: wrap-reverse;
flex-flow
是flex-diretion属性和flex-warp的简写形式，默认值为row nowrap
justity-content： 主轴的对齐方式
justity-content: flex-start（默认值）//左对齐
justity-content: flex-end //右对齐
justity-content: center // 居中
justity-content: space-between //两端对齐，项目之间的间隔都相等。
justity-content: space-around //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：交叉轴的对齐方式
align-items:flex-start //交叉轴的起点对齐。
align-items:flex-end/ /交叉轴的终点对齐。
align-items:center //交叉轴的中点对齐。
align-items:baseline // 项目的第一行文字的基线对齐。
align-items:stretch //（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：多轴对齐方式（一个轴不起作用
align-content:flex-start //与交叉轴的起点对齐。
align-content:flex-end /叉轴的终点对齐。
align-content:center //轴的中点对齐。
align-content:space-between /叉轴两端对齐，轴线之间的间隔平均分布。
align-content:space-around //轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
align-content:stretch //（默认值）轴线占满整个交叉轴。
面试中常问的问题
flex：1；flex:0; flex: auto的作用
是flex-grow, flex-shrink 和 flex-basis的简写
- flex-grow:扩展，默认为0，即表示如果有剩余空间，也不放大
- flex-shrink: 收缩，默认为1， 即表示如果空间不足，将项目缩小
- flex-basis: 项目的长度，在分配多余空间之前，项目占据主轴空间，相当于我们设置的width
flex: 1
放大，可缩小，自动填充剩余空间(平均分配)
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex: auto
可扩大，可缩小,自动填充满剩余空间（根据内容大小分配）
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
flex: 0
不可扩大，可缩小，表现形式为最小内容宽度
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
flex: none
不可扩大，不可缩小，内容本身的宽度是多少就是多少
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: none;
}
