动画和flex布局

动画

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 动画暂停和播放
  用animation模拟marquee

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是设定的宽度和高度生效

flex布局

垂直居中

小米页面部分flex布局

转载于:https://juejin.im/post/5c0913b2f265da6167201ecb