display：flex
给父元素设置的属性
display: flex
设置display给父级元素，对父子级的影响
影响
1设置div变成flex盒子 弹性flex， display：flex ；缩写 df
2。div中子元素发生的变化设置了flex的盒子称为父项 盒子里面的子元素称作子项
3具体变化
1子项不再区分块级，行内块，行内元素，全部都可以设置宽高
2子项，默认的宽度和高度： 宽度由内容撑开，高度等于父项的高
3子项
使用浮动无效
使用定位。margin，transform都有效（不常用，传统定位标签）
4默认情况下子项总宽度大于父项的宽也不会换行，只会压缩自身宽度 */
主轴x轴（水平），侧轴y轴（垂直）
主轴对齐方式justify-content
主轴对齐方式(justify-content)：方向是水平
justify-content:flex-start; 默认值，由父元素的起点开始显示,左边
justify-content:flex-end; 从父元素的终点开始显示，右边
justify-content:center; 弹性盒子在弹性容器中水平居中
justify-content:space-around; 空白空间围绕在弹性盒子的两侧--首尾弹性盒子离弹性容器的距离，是弹性盒子与弹性盒子之间的距离的1/2
justify-content:space-between; 首尾的弹性盒子与弹性容器没有间隙，弹性盒子与 性盒子之间的空间间隙相等
justify-content:space-evenly; 平均空白缝隙，均分在弹性容器与弹性盒子之间
先两侧对齐，间隔存放 space-between缩写sb
5间隔存放，两侧空间小于中间 space-around缩写sd
6绝对平均 space-evenly缩写sv
侧轴单行对齐方式align-items
侧轴单行对齐方式(align-items):
align-items:flex-start; 默认值，由父元素的起点开始显示，上边
align-items:flex-end; 从父元素的终点开始显示,下边
align-items:center; 让弹性盒子在垂直方向上居中
侧轴多行对齐方式align-content
设置换行flex-wrap
默认不换行nowrap
换行wrap
设置主轴方向flex-direction
给子项设置的属性
align-self子项在侧轴的对齐方式（子项自身对齐方式）
flex-start左对齐
flex-end右对齐
center居中
伸缩比 flex:1
伸缩比 flex:1
a.给所有的弹性盒子设置，如果值相等就是均分父元素的宽度；
b.其他盒子固定宽度，只有一个盒子设置flex:1,表示这个盒子的宽度占据父元素剩下来的全部
注意：
display:flex,主轴，侧轴对齐方式都是给弹性容器设置(父盒子)
align-self,flex:1都是给弹性盒子设置
当父项主轴改变方向为column
弹性绝对居中
动画
动画的8大属性
animation: name duration timing-function delay iteration-count direction fill-mode;
name 设置动画名称
注意名字不能写running，会不能播放
duration 设置动画的播放时间
tining-function 设置动画的速度曲线：
linear匀速 steps逐帧动画
delay 设置动画延时时间
在延迟时间内：
1显示的是自身的颜色属性
2设置在延时的时间内显示0%画面 backwards
3整个动画播放完毕，动画停留在最后一帧的画面还是回到自身的属性画面上，设置动画播放完毕停留在最后一帧 forwards
4both同时设置了backwards和forwards
iteration-count 设置动画播放次数
infinite无数
direction 设置动画方向 ：
normal默认值先正后正，alternate先正再反，reverse先反再反，altenrnate-reverse先反再正
fill-mode 设置延迟状态和结束状态
backword设置延迟时间内，元素变成第1帧的画面，forwards设置动画结束后停留在最后一帧
play-state动画播放还是暂停
播放默认值running，暂停paused
