1、语法：display：flex【给直接父级设置】
设置了flex布局之后，会有一些改变
设置了flex的盒子 称之为 父项
盒子里的子元素 称之为 子项
具体变化：
a、不再区分块级元素、行内元素、行内块元素，都可以直接设置宽高
b、子项有默认的宽度和高度 宽度 由 内容撑开 | 高度 等于父项的高度
c、子项使用浮动（float）无效，使用定位（position）、外边距（margin）、转换（transform）有效
d、默认情况下 子项总宽度 大于 父项的宽度也不会换行 且 只会压缩本身的宽度（有内容会超出父盒子）
2、设置主轴方向【即子元素的排列方向】
主轴和侧轴是会变化的，flex-direction设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列
div {
/* 默认值，从左到右 */
flex-direction:row;
/* 从右到左 */
flex-direction: row-reverse;
/* 从上到下 */
flex-direction: column;
/* 从下到上 */
flex-direction: column-reverse;
}
一、从右至左【flex-direction: row-reverse;】
二、从上到下【flex-direction: column;】
三、从下到上【flex-direction: column-reverse;】
3、主轴对齐方式
div {
display: flex;
/* 主轴对齐方式 */
/* 默认对齐方式：左对齐 */
justify-content: flex-start;
/* 右对齐 */
justify-content: end;
/* 水平居中对齐 */
justify-content: center;
/* 两边对齐 中间平分*/
/* 间距在子级之间，两边没有*/
justify-content: space-between;
/* 间距加在子级的两侧， */
justify-content: space-around;
/* 每个子级间距都一样 */
/* 所有子级的间距都相等 */
justify-content: space-evenly;
}
a、右对齐（justify-content: end）
b、水平居中对齐（justify-content: center）
c、间距在子级之间，两边没有（justify-content: space-between）
d、间距在每个子级两侧（justify-content: space-around）
每个子级的两边距离都相等
e、所有地方间距都相等（justify-content: space-evenly）
4、侧轴对齐方式（单行） 【添加给父项】
/*
换行属性 flex-nowrap
默认：不换行 nowrap
*/
flex-wrap: wrap;
/* 默认值，起点开始依次排列 */
align-items: flex-start;
/* 终点开始依次排列 */
align-items: flex-end;
/* 沿侧轴居中排列 */
align-items: center;
/* 默认，继承父项的高度【子项没有高度时】 */
/* 如果子项没有高度，侧轴对齐方式也不是这个，高度将由内容决定 */
align-items: stretch;
一、align-items: flex-end;
二、align-items: center;
三、align-items: center;
5、侧轴对齐方式（多行）
/* 侧轴头部开始排列 */
align-content: flex-start;
/* 侧轴尾部开始排列 */
align-content: flex-end;
/* 侧轴中间显示 */
align-content: center;
/* 子项在侧轴先分布在两头，再平分剩余空间 */
align-content: space-between;
/* 子项在侧轴平分剩余空间 */
align-content: space-around;
/* 子项在侧轴所有间隔一样 */
align-content: space-evenly;
一、align-content: flex-start;
二、align-content: flex-end;
三、 align-content: center;
四、align-content: space-between;
五、align-content: space-around;
六、align-content: space-evenly;
6、均分以及子项在侧轴对齐方式
flex 设置 子项占父项剩余的宽度（高度）的比列
align-self 设置子项自己 在侧轴上的对齐方式
/* 开头对齐 */
align-self: flex-start;
/* 尾端对齐 */
align-self: flex-end;
/* 居中对齐 */
align-self: center;
注意：
1.默认宽度等于内容撑开
2.默认高度等于父项的高
3.flex:1 设置 子项的宽度（高度）
4.align-self 设置 子项在侧轴上的对齐
