2020-03-09

今日学习
伸缩盒布局 弹性盒布局
display:flex;
display:inline-flex;

1.容器上使用的属性
display:flex;
justify-content 对齐方式
flex-start 默认起点对齐
flex-end 终点对齐
center 居中对齐
space-between 在主轴项目与项目之间有空间
space-around 在项目周围有空间
align-content;设置多主轴在交叉轴上的对齐方式
align-items;设置在交叉轴的对齐方式
flex-direction;
flex-warp;设置在主轴上是否换行
子元素
flex
2.三行布局
默认情况下主轴是x轴，各元素在一行中多列显示
flex-direction:row(列布局)
flex-direction:column(行布局)
3.网格布局
4.动画
animation-name 使用动画指定动画的名字
animation-duration 指定动画执行的时长
animation-iteration-count 设置动画执行的次数
animation-direction 设置动画执行的方向