flex

flex属性:
需要给父层设置flex，来改变子层的结构变化

** 1,flex-direction【修改排序方式，主轴X轴，还是侧轴Y轴】**
flex-direction:row; //默认向X轴排列，从左到右
felx-direction:row-reverse; //X轴排列，从右到左
flex-direction:column; //Y轴排列，从上到下
flex-direction:column-reverse;//Y轴排列，从下到上
2,justify-content【设置主轴X轴，子元素的排列方式】
justify-content:flex-start; //从左到右排序
justify-content:flex-end: //从右到左排序
justify-content:center; //从中间向俩侧排序
justify-content:space-around; //平分X轴分布空间
justify-content;space-between: //先俩边贴边，再平分剩余空间
3,flex-warp【子元素是否需要换行】
flex-warp:warp; //换行
flex-warp:no-warp; //不换行
4.align-items【单行，设置侧轴上的子元素排列方式，如果主轴为X，设置的就是侧轴Y轴的排列:如果主轴为Y轴，设置的是侧轴X轴】
align-items:flex-start; //默认值从上倒下
align-items:flex-end; //默认之从下到上
align-items:center; //垂直居中
align-items:stretch /拉伸。子元素不设置高度，按照父元素高度填充拉伸
I
5.align-content【多行，设置倒轴上的子元素的排列方式】
align-content:flex-satrt; //从头部开始排列
align-content:flex-end; //从例轴尾部开始排序
alian-content:center; //从侧轴中间显示
align-content:space-around;//子项在例轴平分剩余空间
align-content;space-between;//子项在例轴先分布在俩头，再平分剩余空间
alian-content:stretch; //设置子项元素高度
6,flex-flow【flex-direction flex-wrap 一起使用的用法】
flex-flow:row wrap;

子元素的flex属性

1，flex:【合理分配元素的剩余空间大小】
flex:1;//子元素设置，占额1等份
2，align-self【单独对某个子元素进行设置】
align-self:flex-start;
3.order【元素前后排列顺序，数值越小，越排前面】
order:-1;
4,flex-grow【扩展大小，按比例划分剩余空间的大小，剩余空间是指没有用的空间大小】
例:剩余空间100，100除以6，拆分
item1:{flex-grow:1},
item2:{flex-grow:2}，
item3:{flex-grow:3}
5.flex-shrink【缩小大小，超出父元素的宽度范围，会收缩子元素大小】
flex-shrink:1; //默认会按比例收缩