1布局模型 2.开启flex布局： display:flex 3.父组件的布局
List item – flex-direction的基本使用: flex-direction: row;默认值， 沿主轴main start从左向右排列； flex-direction: row-reverse; 沿主轴main start从右向左排列； flex-direction: column; 沿主轴main start从上向下排列； flex-direction: column-reverse; 沿主轴main start从下向上排列；
List item – justify-content的基本使用： justify-content: flex-start; 与main-start对齐 justify-content: flex-end; 与main-end对齐 justify-content: center; 居中对齐 justify-content: space-around; 边距是中间距离的一半 justify-content: space-between; flex items之间的举例相等，且两端与main-start和main-end对齐 justify-content: space-evenly; 边距水平平分
List item – align-items的基本使用 align-items: center; 沿cross轴居中 align-items:flex-end; 沿cross轴居底部对齐 align-items:flex-start; 默认沿cross轴居底部对齐 align-items:baseline; 沿第一个文本下划线对齐
List item – flex-wrap的使用 flex-wrap: nowrap; 默认不换行 flex-wrap: wrap; 换行
List item – align-content的基本使用
使用条件：当排列的行数量等于或大于2时生效 align-content: flex-start; 与cross轴main-start对齐 align-content: flex-end; 与cross轴flex-end对齐 align-content: center; 与cross轴居中对齐 align-content：space-around; 边距是中间距离的一半 align-content：space-between; flex items之间的举例相等，且两端与cross-start和cross-end对齐 align-content：space-evenly; 边距水平平分
4.子组件的布局
List item – flex-items-order的使用 order的值越小排在前面，默认值为0；可以是负数，0跟整数
List item – flex-items-align-self的使用
覆盖父元素设置的align-items: center;
List item – flex-grow和flex-shrink的基本使用 flex-grow是增长，flex-shrink是收缩 根据数值是否大于1来设置每个item的成长值，设置的值乘以剩下的宽度； 例如：1.父元素的宽度是400px，子元素是100px，设置 flex-grow: 0.1，则 0.1*300=30，则子元素的宽度为100+30，如果是1就平分，n大于1就占n份。