flex
是CSS的display属性中的一个值，随着inline-flex的使用，它将使它适用的元素成为一个
flex container（伸缩容器），而这个元素的每个子元素将成为flexitem（伸缩项目）。
伸缩项目将参与到flex布局中
所有由CSS Flexible BoxLayoutModule（CSS伸缩盒布局模型）定义的属性都能被它们使用
flex布局是工作中常用的CSS布局方式
display:flex; 让一个元素变成容器，另起一行进行排列
flex-direction:row/column; 横着/竖着排列
justify-content:center/space-between; 在主轴上对齐方式,居中/分开
align-item:center; 在纵轴上对齐方式,居中
Flex 布局
有2个内容
容器 container （一般当做父元素）
容器里面的项 items （直接子元素）
flex container的样式（以下内容是contennter）
让一个元素变成flex容器,大多数都使用flex
.contenter{
display:flex;（另起一行在进行）
display:inline-flex;（直接在同一行进行）
}
flex里面的div和文档流无关,所有不自动换行,在flex里面叫弹性盒模型的流，flex flow 弹性流
改变items的流动方向,主轴（默认是横轴）
.container{
flex-direction:row 横着排，从左往右
flex-direction:row-reverse 横着排，从右往左
flex-direction:colunm 竖着排，从上往下
flex-direction:column-reverse 竖着排，从下往上
}
改变折行,换行
.container{
flex-wrap:nowra; 默认不换行
flex-wrap:wrap; 换行
flex-wrap:wrap-reveres; 从下往上折,一般不使用
}
主轴对齐方式(默认主轴是横轴,除非改变flex-direction方向)(常用前4个)
justify（对齐）content（内容）
justify-content:flex-start; 默认情况，弹性流的开始,都往开始的地方挤
justify-content:flex-end; 都往后面挤
justify-content:center; 往中间靠,居中
justify-content:space-between;空间,间隙
justify-content:space-around;周围
justify-content:space-evenly;平均分空隙
次轴对齐方式（默认是纵轴）
例如内容的高度不同
.container{
align-items:flex-start; 默认，上边对齐
align-items:flex-center; 居中
align-items:flex-end; 下边对齐
align-items:stretch; 按最长的对齐
}
多行内容对齐
.container{
align-content:flex-start; 上边对齐
align-content:flex-end; 下边对齐
align-content:flex-center; 中间对齐
align-content:flex-stretch; 按最长的对齐
align-content:space-between; 宽度放中间
align-content:space-around; 围绕着放宽度
}
flex item的属性（以下内容是item样式）
item上加order
元素默认的order是0，添加order，会按order的值排列顺序，例如
.item:first-child{order:1;} 作为第一个儿子的item,order是1
.item:nth-child(2){order:4;} 作为第二个儿子的item,order是4
.item:last-child{order:3} 最后一个儿子item,order是3
按first-child<last-child<nth-child(2)排序
flex-grow（控制自己长胖，变宽）
用来分配多余的空间
.item:first-child{flex-grow:1;}
.item:nth-child(2){flex-grow:2;}
.item:last-child{flex-grow:1;}
比例按1,2,1分配多余空间，不写的话默认值为0
例如：logo:0;导航:1;头像:0;拖动页面只有导航变宽
flex-shrink（防止变瘦，变窄）
flex-shrink:0; 防止变瘦,默认是1
.item:first-child{flex-shrink:0;}
简写控制宽度
flex:flex-grow flex-shrink flex-basis
flex:1 1 100px;
常用代码
CSS不要写死宽度
width:100px;
不写死宽度
width:50%
max-width:100px
min-width:100px
width:30vm（屏幕宽度的1%）
vertical-align:middle;去掉图片下方 额外的空隙
margin-left:auto; 等于 justify-content:space-between; （靠左）
flex：flex练习代码
详细资料点击：container图示
