css3的flex

Steps(num,[start/end]))
num:拆成多少步（当num为12时，整个动画最好有13帧）
start:看不见第一帧
end:看不见最后一帧

transform:只能作用于块元素

flex:frog练习
https://flexboxfroggy.com/
1.flex基础点（不等于浮动）
容器，项目，主轴，侧轴的概念
永远在主轴的正方向上排列
Flex分新旧两个版本：
-webkit-box
-webkit-flex/flex
2.注意点
移动开发要关注老版本的flex
老版本的box通过两个属性四个属性值控制了主轴的位置和方向
新版本.的flex通过一个属性四个属性值控制了主轴的位置和方向

3.老版本
容器：
布局方向：
-webkit-box-orient:horizontal/vertical
排列方向：
-webkit-box-direction:normal从左到右
Reverse从右到左
富裕空间的管理：
只决定富裕空间的位置，不会给项目分配区域空间
主轴
-webkit-box-pack
主轴是x轴
start：在右边
end: 在左边
center：在两边
justify：在项目之间
主轴是y轴
start：在下边
end：在上边
center：在两边
justify：在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start：在右边
end： 在左边
center：在两边
侧轴是y轴
start：在下边
end： 在上边
center：在两边
项目：
弹性空间管理
-webkit-box-flex:弹性因子（默认值为0）

4.新版本
容器：
布局方向：
排列方向：
Flex-direction:row/row-reverse/column/column-reverse
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
justify-content
flex-start： 在主轴的正方向
flex-end: 在主轴的反方向
center： 在两边
space-between： 在项目之间
space-around： 在项目两边

			侧轴
				align-items
						flex-start：在侧轴的正方向
						flex-end：    在侧轴的反方向
						center：		在两边
						baseline    基线对齐
     					stretch		等高布局（项目没有高度）	

项目：
弹性空间管理
flex-grow:弹性因子（默认值为0）
5.新增版本规则
容器：
fex-wrap:控制侧轴的方向
nowrap不换行
wrap侧轴方向由上向下（flex-shrink失效）
wrap-reverse 侧轴方向由下向上（flex-shrink失效）

align-content：多行/多列时侧轴富裕空间的管理（把多行/列看成一个整体）

flex-flow：flex-direction和flex-wrap的简写属性
本质上控制了主轴和侧轴分别是哪一根，以及它们的方向

项目：
order：控制项目的排列顺序
align-self：项目自身富裕空间的管理
flex-shrink:收缩因子（默认值为1）
flex-basis:伸缩规则计算的基准值（默认width和height的值）
6.伸缩规则
flex-basis(默认值为auto)
flex-grow（默认值为0）
可用空间=（容器大小-所有相邻项目flex-basis的总和）
可扩展空间=（可用空间/所有相邻项目flex-grow的总和）
每项伸缩大小=（伸缩基准值flex-basis+（可扩展空间flex-grow值））
flex-shrink（默认值为1）
–.计算收缩因子与基准值乘的总和
var a = 每一项flex-shrinkflex-basis之和
–.计算收缩因数
收缩因数=（项目的收缩因子项目基准值）/第一步计算总和
var b = (flex-shrinkflex-basis)/a
–.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
var c = b * 溢出的空间

7.侧轴富裕空间的管理
单行单列
align-items
align-self（优先级高）
多行多列
align-content