弹性盒
主轴 侧轴
display: flex|inline-flex
例子
弹性盒子 display:flex
效果相当于让子元素浮动并且让父元素清除了浮动
inline-flex的效果
宽度由内容的宽度决定，不再是横向最大的了
flex-direction:row| row-reverse | column | column-reverse
display:flex
相当于左浮动
fiex-direction:row-reverse
相当于右浮动
把普通盒子变成弹性盒子
控制盒子的方向
控制超出是否换行
盒子对齐方式
align-items
默认值
子容器有高度显示自己的
没有高度和弹性 盒子的一样
flex-end效果
flex-center效果
baseline效果
stretch效果
align-content
写在子元素内的属性 ===》
flex-grow
子元素分配了 flex-grow 以后
多出的空间被分配
当前例子会以1比1的比例进行分配
默认情况下flex-grow值为0，表示不分配
flex-shrink
eg
压缩方法计算公式