1、display: flex;
给父元素加，作用在子元素身上
伸缩布局(弹性布局):
特点:子元素在主轴方向永远不会超过父盒子,如果会超过,将会自适应缩小子元素的大小，用在移动端好做适配
2、关于主轴方向
row：默认值，默认 x 为主轴
column：以 y 轴为主轴 “flex-direction: column;修改主轴为 y 轴”；
row-reverse：以 x 轴为主轴，起点是反过来的 不常用
column-reverse：以 y 轴为主轴，起点也是倒过来的 不常用
3、子元素在主轴方向上的排列方式
justify-content是给父元素添加的，作用在子元素身上
flex-start：默认值，默认在主轴起点对齐
flex-end：在主轴的终点对齐
center：在主轴居中 “justify-content: center;”
space-around：元素和元素之间有间距，起点和终点两边也有间距，并且两边间距是元素间距的一半
space-between：元素和元素之间有间距，两边没有间距（间距平均的）
4、统一设置子元素在副轴方向上的排列方式
stretch：默认值，如果不设置副轴上的大小，那么会铺满副轴
flex-start：在副轴起点
flex-end：在副轴终点
center：在副轴居中
5、flex-wrap：wrap；“换行”：默认值（nowrap）不换行
在主轴不够放的情况下，有几行就平分副轴的大小，下图可运用于此
6、弹性布局特点
特点1：子元素在主轴方向上永远不会超过父盒子
特点2：如果没设置子元素在副轴上的大小，默认用的是父元素的副轴大小
特点3：如果没设置子元素在主轴方向上的大小，就是用内容撑开的大小
特点4：如果父元素用伸缩布局，相对于把所有子元素变成行内块元素
7、flex属性 flex:1;
是给子元素添加的属性
flex 设置的是元素在主轴方向的占比
计算的是永远是主轴方向剩下的大小
让子元素平分父元素主轴大小时，给所有子元素设置同样大小的 flex 值
8、align-self：单独设置某个元素在副轴的排列
是给子元素添加的属性
stretch：默认值，不设置大小就会铺满副轴
flex-start：在副轴的起点
flex-end：在副轴终点
center：在副轴居中
9、flex-basis
设置主轴方向上的大小，当主轴为x轴设置的是宽度，当主轴为y轴设置的是高度【不常用的】
CYT 