现象
1、display：flex给父元素后，子元素横着排，且高等于父元素高
2、子元素无论多大，都会强制在父元素中
改变盒子模型的方法
box-sizing
conent-box 默认值
border-box 变为怪异盒子
盒子模型计算方式
正常盒子=width+margin左右+padding左右+border左右 左右都要加上
怪异盒子=width+margin左右 width中包含了padding值和border值
flex容器属性（父元素）
父元素且是最直接的父元素
1、display
flex 多个父元素时竖着排，margin：0 auto 可以居中，且可以做显示效果
inline-flex 多个父元素时横着排，margin：0 auto 不能居中
设置flex布局后，子元素上的浮动等效果都会消失
2、flex-direction
决定主轴方向，即子元素的排列方向
row 横着排，且是默认值
row-reverse 反向横着排
column 竖着排
colum-reverse 后向竖着排
row时，x轴是主轴 column时，y轴是主轴
3、flex-wrap
子元素是否换行显示
nowrap 不换行
wrap 换行
wrap-reverse 反向换行
4、flex-flow
row nowrap 默认值 （3和2的简写）
5、justify-content
子元素对齐方式 2会影响5
flex-start/end 开始/结束位
center 整体居中
space-between 空间两端对齐
space-around 均分对齐
6、align-items
交叉轴对齐方式
stretch 拉伸等高，默认值
baseline 基线对齐
flex-start/end 开始/结束位
center 整体居中
7、algin-content
多根轴线对齐方式
flex-start/end 开始/结束位
center 整体居中
space-between 空间两端对齐
space-around 均分对齐
对单行不起作用，且多行有效时，会合并默认间距
flex项目属性（子元素）
1、order
控制元素排列顺序，数越小越靠前，默认为0
2、flex-grow
放大比例，默认为0，为1时指平分剩余空间
3、flex-shrink
缩小比例，默认为1，为0时指实际大小
2指剩余空间的2分之1
4、flex-basis
等于width
5、flex简写
grow shrink basis 默认为0，1，auto
注释会影响控制台解析，但不影响显示效果
6、algin-self
自己对齐，且只控制自己