初学Web笔记 css day08

弹性布局
过渡

一.弹性布局
1.交叉轴对齐
用于交叉轴有多行的情况
align-content:
flex-start 开始对齐
flex-end 结束对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目左右平均分配边距
space-evenly 项目之间平均分配边距
2.项目排序规则
order
默认值是0，可以是负数，数字越小，排序越靠前
3.项目的增长规则
flex-grow 用于对剩余空间的分配
默认为0，有剩余空间的时候，不会分配
如果设置为1，有剩余空间的时候，会自动放大，占全部剩余空间
如果每个项目中都有这个属性，则表示要分配剩余空间的比例
第1个项目1，第2个项目2，第3个项目1
1/(1+2+1) 2/(1+2+1) 1/(1+2+1)
4.项目的收缩规则(了解)
flex-shrink
项目在容器中的收缩规则，只有项目总的宽度超过了容器才会使用这个属性
默认值1，当容器空间不足时，项目默认收缩
如果值0，当容器空间不足时，项目不会收缩
当值为n，表示空间不足的时候，项目收缩的比例
例如：项目1收缩值1，项目2收缩值1，项目3收缩值2
1/(1+1+2) 1/(1+1+2) 2/(1+1+2)
5.项目的初始尺寸(了解)
flex-basis
项目在主轴上的初始尺寸，一旦这个属性设置以后原来宽度（高度）就会失效
如果主轴在水平方向，宽度会失效
如果主轴在垂直方向，高度会失效
6.综合写法
flex: 增长规则 收缩规则 初始尺寸；
如果只写一个值，表示增长规则，例如 flex:1

二.过渡
表示元素两种样式的变化过程
Transition: 要过渡的属性 总时长 延时 运行曲线
过渡的属性： all 代表所有的属性 可以省略
总时长：整个过渡的时长，单位是秒(s)
延时：在过渡执行前要等待的时长 可以省略
运动曲线：运动速度，通常使用匀速linear；默认是ease（先快再慢）

cubic-bezier.com
注意事项：除了总时长和延时两者有先后之分，其它不分先后顺序。

任务：查看哪些可以过渡，哪些不能过渡。