一张背景图,改变back-position-x的位置让他动起来
step-start 逐帧动画
animation: play 0.5s step-start infinite;
触发弹性盒子
给父容器添加 display: flex
弹性盒子的特点:
1、父容器添加弹性盒子以后子元素可转换成块元素
2、子元素横向排列了
3、父元素添加弹性盒子后只有一个子元素的时候给子元素添加 margin auto可以上下左右居中。
概念
1、容器(父元素)
2、项目(子元素)
触发完弹性盒子后只会影响子元素的排列方式,孙子辈元素不影响。
概念
横轴 x轴 横向(水平方向)
纵轴 y轴 纵向(垂直方向)
主轴 弹性盒定义的方向
侧轴 与主轴对立的一个方向
容器属性
触发弹性盒子 display:flex
修改主轴方向 column纵向 row横向(默认)
flex-direction: column;
对齐方式
语法:justify-content
取值:
flex-start:主轴的开始位置(元素挨在一起)
flex-end:主轴的结束位置(元素挨在一起)
center:主轴位置居中(元素挨在一起)
space-around:主轴环绕对齐
space-between:主轴两端对齐
align-items: stretch(位伸) 默认值,项目没有高度
flex-start:侧轴开始的位置
flex-end:侧轴结束位置对齐
center:侧轴位置中间对齐
H5学习
123456
元素的折行问题
如晒个容器当中放了过多的项目会出现项目挤压的问题,项目原本的宽无法使用。
不想被挤压就进行折行,定义宽度
flex-wrap: wrap/nowrap(默认不折行)
折行后会出现行高的问题如下图:
折行之后行间距
行间距:align-content 可消除行间距
属性值:
flex-start:侧轴开始位置进行对齐(几行挨在一起的)
flex-end:侧轴结束位置进行对齐(几行挨在一起的)
center: 侧轴中心对齐
space-around:侧轴环绕对齐
space-between:侧轴两端对齐
stretch:拉伸(默认值)
order 控制元素的布局顺序,取值越大越靠后,默认的值auto(0)
H5学习
12345
调整单个元素在侧轴的对齐方式
align-self:
H5学习
12345
挤压属性
当项目过多的时候宽义马会被挤压,如果需要不挤压可以使用
flex-shrink 取值:0 不挤压 1挤压
H5学习
1234512345
flex:1;项目占余下所有空间
H5学习
头部 主体
网格布局的含义:将页面划分成一个一个的网格区域,用于不同样式的合并,制作不同的效果,网格和flex布局的区别
相同点:
H5学习
repeat函数
重复数值
网格线的命名:
grid-template-rows: [r1]100px [r2] 100px [r3]100px [r4]100px [r5];
grid-template-columns: [c1]100px [c2]100px [c3]100px [c4]100px [c5];
网格的间距
行间距
网格在容器当中的对齐方式:纵向 横向
place-content: center center
项目的排列方向:
grid-auto-flow: column/row