弹性和模型的基本使用
弹性盒模型
弹性容器+弹性子元素;
弹性盒模型的属性:
1.开启弹性盒模型:display:flex块级弹性盒模型
display:inline-flex行类弹性盒模型
区别:对外界的区别,对里面没有区别,也就是块级一行中不能和其他 标签一行显示;
2.flex-direction(方向):控制弹性盒模型的方向:控制主轴的方向;
1
2
3
4
| a:row(默认)水平从左到右
b:row-reverse水平从右到左
c:column竖直从上到下
d:column-revese竖直从下到上
|
3.flex-wrap:是不是换行;
1
2
3
4
| a.nowrap不换行;
b.wrap换行 朝着右下和主轴垂直
c.wrap-reverse 朝着左下和主轴垂直
flex-flow:合并flex-direction和flex-wrap；
|
4.justify-content:主轴方向的对齐方式;
1
2
3
4
5
| a.flex-start上对齐;
b.flex-end下对齐;
c.center居中对齐方式
d.baseline基线对齐方式(在盒子里有文字的使用使用);
e.stretch(默认)内部盒子没有设置高度的话，就是默认占满；
|
5.align-items:交叉轴的对齐方式;(只有一行的时候用这个,注意：如果第一排的盒子高度不一样的话，他就是设置你的和子是上对齐下对齐还中间对齐)
1
2
3
4
5
| a.flex-start上对齐;
b.flex-end下对齐;
c.center居中对齐方式
d.baseline基线对齐方式(在盒子里有文字的使用使用);
e.stretch(默认)内部盒子没有设置高度的话，就是默认占满；
|
6.align-content:在交叉轴方向存在多行弹性子元素才有效(多行的是使用这个)
1
2
3
4
| a.flex-start上对齐;
b.flex-end下对齐;
c.center居中对齐方式
e.stretch(默认)内部盒子没有设置高度的话，就是默认占满；
|
7.align-items 和align-content的对齐区别;
1
2
3
4
| 1.align-content:在交叉轴方向存在多行弹性子元素才有效
2.align-content是把弹性子元素当做一个整体在交叉轴对齐的
3.align-items不是把弹性子元素当做一个整体在交叉轴对其的
------------------------以上元素是在弹性容器中的------------------
|
————————一下属性是在弹性元素中的——————
8.align-self:控制单个元素在交叉轴的方向中的位置
1
2
3
4
5
| a.flex-end右边对齐
b.flex-start左对齐;
c.center居中对齐方式
d.space-around两端对齐并且中间两端有间隙
e.space-between两端对齐并且两端没有间距;
|
9.order控制弹性子元素在弹性容器主轴方向的位置,所有默认值是0;数值越小越靠前;
10.flex-grow:在主轴方向有剩余空间,给他等比例的生长系数;
1.默认是0;也可以给个别添加增长系数就可以了;
11.flex-shrink:在主轴方向有剩余空间,给他等比例的收缩系数;