动画
transition 缓动
- transition-property：变化属性
- transition-duration：时间
- transition-timing-function：缓动函数/步数step()
- transition-delay:延迟时间，当为负数的时候会有渐变效果。transition: height 4s linear -2s直接渐变到为2s的值。
animation 动画
- 先写出声明动画@keyframs 名字{0%{width:200px} 100%{widt:300px}}
- 选择器使用函数div{animation：名字}
- transition 三个属性都有。animation-timing-function可以加在声明动画里面。
- animation-iteration-count：次数，infinite无穷次
- animation-fill-mode：backwards/forwards/none/both动画开始前和后的元素状态再有延迟的情况下
- animation-play-state：paused/running 动画暂停和播放
flex
flex距离计算
-
flex-grow:数值，扩张因子，当元素小于父元素内容时，所有元素的flex-grow大于1，根据元素的flex-grow的大小分剩余内容
-
flex-shrink：数值，缩小，元素大于父元素时，根据元素的宽度减去父元素的宽度，在让元素的宽度和shrink系数相乘之和，自身的乘数比上总数乘以超出的宽度，就是每个元素应当收缩的大小。当总flex-shrink小于1时，总的宽度乘以总flex-shrink的值就为收缩了这么多，现在的宽度为没收缩的宽度加上原来的宽度
例如;父元素的宽度为400px；俩个子元素的宽度为300px，第一个flex-shrink：2，第二个flex-shrink：1；这样第一个的收缩大小为200^2^300/900
flex空间分配方向
- flex-flow：flex-wrap：wrap/nowrap/wrap-reverse flex-direction:row/column-reverse 第一个为是否折行和次要分配方向，第二个位主要分配方向。wrap为顺着主要分配的方向，当主要分配方向(从上到下，从左到右时)次要分配方向也就会从左到右，从上到下。wrap-reverse会反着。
flex摆放
- justify-content:flex-start | flex-end | center | space-between | space-around，当有多余空间主轴摆放位置
- align-items：flex-start | flex-end | center | baseline | stretch(拉伸到一行的高度) 垂直方向摆放位置
- align-content:flex-start | flex-end | center | space-between | space-around|stretch 多条轴垂直方向的摆放位置
单个元素的属性
- align-self单个空间位置
- order：value，元素摆放的位置，默认为0
- flex：flex-grow/flex-shrink/flex-basis当主轴为横向就为元素宽度，主轴为垂直就为元素的高度，值为auto是设定的宽度和高度生效