今天学习了
1.flex布局
2.flex-flow
3.align-item
4.animation补充效果
1.flex布局 flex-direction
row:
row-reverse : 改变方向为从右到左的顺序 起点在右端
column:改变主轴方向为垂直方向 起点在上
column-reverse :改变方向顺序 起点在下 从下到上
nowrap:默认不换行
wrap:换行
wrap-reverse:换行 改变方向顺序 第一行在下方
2.flex-flow是复合属性
默认值是row nowrap 当只给一个值 另一个值默认
flex-start:靠左对齐 默认
flex-end;靠右对齐
space-between:两端对齐 项目之间距离相等
space-around:每个项目两边的距离相等 项目之间距离比项目到边框距离大一倍
space-evenly:项目之间的距离以及项目到边框的距离都相等 会受到子元素设置margin的影响
3.align-item布局设置
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
baseline:项目基于第一行文字基线的对齐方式
center:交叉轴中心对齐
stretch:默认值 如果项目没设置高度或者auto 就自动撑满整个容器
4.animation补充效果
animation-fill-mode:forwards :动画结束时停在结束位置 backward是默认回到原来的位置
animation-play-state:paused:摸上时动画暂停播放 默认值是running 手摸上去动画开始播放
animation-iteration-count:3;让动画播放3次