Css3six

动画类型

在动画类型中，除了linear step等方式以外还有以逐帧动画（让动画进行阶跃式变化而不是两个状态）

flex布局

只要设置了flex布局浮动定位全部失效
弹性布局是控制容器的项目在容器中是怎么排列的 横向的轴叫主轴默认从左到右排列 竖向叫做侧轴默认从上到下排列

新版本开启弹性盒子

display：flex
想要让元素进行弹性布局，必须在父元素中设置display：flex 开启弹性布局
稍微低一点的版本需要加上前缀
新版本开启使用：display：flex

1. 当不设置宽高的时候内容撑开宽度
2. 项目沿着主轴依次排列
3. 高度默认撑开整个容器
4. 当项目的宽度相加没有超过父级的宽度那么项目不进行压缩
5. 当项目的宽度相加超出父级的宽度项目进行压缩并且不会填满

flex-direction

改变主轴位置
flex-direction：row 默认值由左向右
flex-direction：row-reverse 由右向左
flex-direction：column 主轴由上向下
flex-direction：column- reverse主轴由下向上

老版本开启弹性盒子

display-webkit-box

富余空间管理（主轴）

justify-content：flex-start 默认在主轴开始位置依次排列
justify-content：flex-end 在右对齐到主轴结束位置（不是反转）
justify-content：center 项目在主轴内居中
justify-content：space-around 富裕空间包含项目
justify-content：space-between 项目包含富裕空间

侧轴空间管理

align-items：stretch 默认撑满侧轴
align-items：flex-start 侧轴上对齐
align-items: center侧轴居中旨在当前项目所在的行居中
align-items：baseline基线对齐
flex-grow 将富裕空间分配给这给项目
justify-content 只是控制富裕空间怎么排列但是并没有把富裕空间分配给项目使用
flex-wrap：wrap 项目超出换行
flex-wrap：nowrap 超出就压缩
flex-wrap：wrap-reverse 超出父级的宽度换行并改变侧轴的start 和end位置
align-content：flex-start 控制项目整体打包在侧轴的居中
align-content：flex-end 控制项目整体打包在侧轴的排列
冲突：在项目换行后侧轴的排列优先align-content 在项目没有换行时，侧轴的排列优先align-items
flex-flow：wrap column
order对项目在容器中的排列，定义顺序优先没有order属性排列，然后再从小到大排列order

单独控制元素在侧轴上的位置

align-self：flex-start
align-self：center
align-self: end

收缩率

(项目1+项目2-父级宽度)项目1/（项目宽度12+项目宽度2）
子元素的基准值 flex-basis：可以在弹性布局中取代width，代表的是在主轴上的宽度但是当主轴和侧轴交换位置那flex-basis就变成了项目的高度了

等分布局条件

基准值：0
富裕空间分配项目：1
收缩率：1
简写flex：1
s