web随堂笔记

122 阅读1分钟

今天学习了

1.flex布局

2.flex-flow

3.align-item

4.animation补充效果

1.flex布局 flex-direction

row:

image.png

row-reverse : 改变方向为从右到左的顺序 起点在右端

image.png

column:改变主轴方向为垂直方向 起点在上

image.png

column-reverse :改变方向顺序 起点在下 从下到上

image.png

nowrap:默认不换行

image.png

wrap:换行

image.png

wrap-reverse:换行 改变方向顺序 第一行在下方

image.png

2.flex-flow是复合属性

默认值是row nowrap 当只给一个值 另一个值默认

image.png

flex-start:靠左对齐 默认

image.png

flex-end;靠右对齐

image.png

space-between:两端对齐 项目之间距离相等

image.png

space-around:每个项目两边的距离相等 项目之间距离比项目到边框距离大一倍

image.png

space-evenly:项目之间的距离以及项目到边框的距离都相等 会受到子元素设置margin的影响

image.png

3.align-item布局设置

flex-start:交叉轴起点对齐

image.png

flex-end:交叉轴终点对齐

image.png

baseline:项目基于第一行文字基线的对齐方式

image.png

center:交叉轴中心对齐

image.png

stretch:默认值 如果项目没设置高度或者auto 就自动撑满整个容器

image.png

4.animation补充效果

animation-fill-mode:forwards :动画结束时停在结束位置 backward是默认回到原来的位置

animation-play-state:paused:摸上时动画暂停播放 默认值是running 手摸上去动画开始播放

animation-iteration-count:3;让动画播放3次