flex布局总结

flex布局就是有元素和容器，设置容器的display：flex；或者是display:inline-flex;

flex的容器的属性
flex-direction  决定元素的排列方向 决定主轴和交叉轴的位置
flex-wrap       决定元素如何换行（排列不下时）
flex-flow       flex-direction 和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items     元素在交叉轴的对齐方式


flex元素的属性
flex-grow       当有多余空间时，元素的放大比例
flex-shrink     当空间不足时，元素的缩小比例
flex-basis      元素在主轴上占据的空间
flex是grow,shrink,basis 的简写
order           定义元素的排列顺序，默认都为0，所以只有把元素都改成100，才可以自由变换顺序

align-self      定义元素自身的对齐方式，会覆盖上面的容器设置的对齐方式

想要实现垂直水平居中只要设置父容器的justify-content，align-items

flex：1=>如果父容器的大小没有设置display:flex,那么对元素的设置毫无意义

还有flex：1默认是flex：0，1，auto；三个分别是放大比，缩小比，主轴占据长度

我觉得缩小比是一定要设置的，放大比可以不设置