flex属性的小总结

display:flex;
display:inline-flex;

整体flex作用的区域叫：flex container
里面的每一个元素叫：flex items
主轴 （main axis） 对应的尺寸 main size 对应的开始main start 对应的结束 main end
交叉轴 （cross axis） 对应的尺寸 cross size

作用在flex container上的属性如下
前提：父元素设置display:flex;后，子元素默认沿着主轴的方向排列 main start -》main end
主轴的排列方式flex-direction

flex-direction:row;                           //主轴为横轴，子元素item从左到右排列 （默认）
flex-direction:row-reverse;             //主轴为横轴，子元素item从右到左排列 （反转）
flex-direction:column;                    //主轴为纵轴，子元素从上到下排列
flex-direction:column-reverse;        //主轴为纵轴，子元素从下到上排列

主轴的对齐方式justify-content属性如下

justify-content:flex-start;    //与main start对齐
justify-content:flex-end;     //与main end对齐
justify-content:center;       //居中对齐
justify-content:space-between;   //两边紧靠父元素，分散对齐
justify-content:space-evenly;   //分散对齐，父子之间，子子之间
justify-content:space-around;   //子到父距离是子子之间距离的一半

交叉轴（侧轴）的对齐方式align-items属性如下

align-item:normal/stretch;  //当flex items在交叉轴方向上高度为auto时，会自动拉伸至填充flex container（高度撑满父元素）
align-item:flex-start;        //与交叉轴start对齐
align-item:flex-end;            //与cross end对齐
align-item:center;                //与交叉轴中线对齐
align-item:baseline;				//与基线对齐（子元素的第一行元素的基线对齐）

换不换行显示flex-wrap，默认不换，超出父级宽度，子元素会压缩

flex-wrap:nowrap;    //默认不换行
flex-wrap:wrap;        //换行
flex-wrap:wrap-reverse;        //在交叉轴上换行并反转

flex-flow 是flex-direction和flex-wrap 的缩写属性

flex-flow:row-reverse wrap;      //反转并且换行

align-content 决定多行的flex-items在交叉轴上的对齐方式

align-content:stretch;        //默认
align-content:flex-start;      //沿着侧轴cross start方向一层层（层与层之间无间隙）排列
align-content:flex-end;       //沿着侧轴cross end方向（从上到下/从左到右开始）一层层（层与层之间无间隙）排列
align-content:space-between;
align-content:space-evenly;
align-content:space-around;

作用在flex items(单个元素)上的属性如下
order

order:10;     //值越小越靠前面排列（沿着主轴）

align-self和align-items属性一致

align-self:stretch;
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;

flex-grow分剩余的空间(成长)，items的flex-grow之和大于1，则按比例分剩余空间。之和小于1，则用flex-grow的值乘以剩余空间的尺寸

flex-grow:1;
flex-grow:0.2;

flex-shrink收缩和flex-grow是处于相对的状态
flex-basis样式基础，优先级较高

flex缩写属性,成长 收缩 基础

flex：0 1 200px;