移动端flex布局笔记整理

父元素+display:flax;为容器属性,子元素为项目属性

容器属性

1.flex-direction决定主轴(水平方向)方向

flex-direction: row;设置主轴(水平方向),起点在左端(默认)
页面效果:
1-1 ```
flex-direction: row-reverse;设置主轴(水平方向),起点在右端
页面效果:
1-2
flex-direction: column;设置主轴(水平方向),起点在上沿
页面效果:
1-3
flex-direction: column-reverse;设置主轴(水平方向),起点在下沿
页面效果:
1-4

2.flex-wrap默认都排在一条线,如何换行

flex-wrap: nowrap;不换行(默认)
页面效果:
2-1
flex-wrap: wrap;换行,第一行在上方
页面效果:
2-2
flex-wrap: wrap-reverse;换行,第一行在下方
页面效果:
2-3

3.flex-flow是direction和wrap的简写形式

flex-flow: row nowrap;主轴(水平方向)起点为左端(默认),不换行(默认)
$$注意:符合团队习惯,不能因为简便,损失了代码的可读性
页面效果:
3-1

4.justify-content定义项目在主轴(水平方向)上的对齐方式

justify-content: flex-start;左对齐(默认)
页面效果:
4-1
justify-content: flex-end;右对齐
页面效果:
4-2
justify-content: center;居中
页面效果:
4-3
justify-content: space-between;两端对齐,项目与项目之间间隔相等
页面效果:
4-4
justify-content: space-around;每个项目两侧的间隔相等
页面效果:
4-5

5.align-items定义项目在交叉轴(垂直方向)上的对齐方式

align-items: flex-start;在交叉轴(垂直方向)起点对齐
页面效果:
5-1
align-items: flex-end;在交叉轴(垂直方向)终点对齐
页面效果:
5-2
align-items: center;在交叉轴(垂直方向)中点对齐
页面效果:
5-3
align-items: baseline;项目第一行文字的基线对齐
页面效果:
5-4
align-items: stretch;如果项目没有设置高度,或者auto会占满整个容器(默认值)
页面效果:
5-5

6.align-content定义多根轴线对齐方式

默认样式:

align-content: felx-start;与交叉轴(垂直方向)的起点对齐
页面效果:
6-1
align-content: felx-end;与交叉轴(垂直方向)的终点对齐
页面效果:
6-2
align-content: center;与交叉轴(垂直方向)的中点对齐
页面效果:
6-3
align-content: space-between;与交叉轴(垂直方向)的两端对齐,轴线之间的间隔会平均分布
页面效果:
6-4
align-content: space-around;每根轴线两侧都相等
页面效果:
6-5
align-content: stretch;(默认值)会拉伸容器内每个项目占用的空间,每个项目下方增加空白,项目默认从容器顶端排列
页面效果:
6-6

项目属性

1.order定义项目的排列顺序(默认0),值越小,越靠前,可以负数

order:number数值定义项目的排列顺序(默认0),值越小,越靠前,可以负数
页面效果:
1-1

2.flex-grow定义项目的放大比例,默认0,主要用于分配剩余空间,负数无效

默认效果:没有给宽度

flex-grow:number数值定义项目的放大比例(默认0),不能为负数.注意:如果其中有个项目内容较多,虽然是均分但是分配后依然占据空间大
flex-grow:1;第二个盒子添加内容后页面效果:
2-1

3.flex-shrink定义项目的缩小比例,默认1,主要用于缩小空间,负数无效

默认效果:

flex-shrink:number数值定义项目的缩小比例(默认1,已经缩放),不能为负数,数值越大缩放越多

flex-shrink:1;页面效果:
3-1

4.flex-basis在flex-grow(项目的放大比例)和flex-shink(项目的缩小比例)起作用前,定义每一个flex项目的默认大小,默认值是auto,项目的本来大小

默认效果:

flex-basis:(length:如px,em,rem,%) 定义每一个flex项目的默认大小,默认值是auto,项目的本来大小
给第一个项目flex-basis:20rem;页面效果:
4-1

5.flex是一个复合属性代表flex-grow(项目的放大比例)和flex-shink(项目的缩小比例)和flex-basis简写,后两个属性可选,默认值为 0 1 auto

默认效果:

三个快捷值
flex:auto;(代表1 1 auto,如果flex容器有剩余空间,会放大,如果空间不足,会收缩,项目内容保持一致);
flex:none;(代表0 0 auto,如果flex容器有剩余空间,不会放大,如果空间不足,不会收缩,项目内容保持一致);
flex:1;(代表1 1 0,如果flex容器有剩余空间,会放大,如果空间不足,会收缩,项目内容不占据空间)
设置flex:none页面效果:
5-1

6.align-self交叉轴(垂直方向)上的对齐方式,允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items(容器的交叉轴对齐方式)属性

align-self: auto;(默认值)表示继承父元素的align-items(容器的交叉轴对齐方式)属性
align-self:flex-start;与交叉轴(垂直方向)的起点对齐;
给第一个项目设置页面效果:
6-1
align-self:flex-end;与交叉轴(垂直方向)的终点对齐;
给第一个项目设置页面效果:
6-2
align-self: center;在交叉轴(垂直方向)中点对齐
给第一个项目设置页面效果:
6-3
align-self: baseline;项目第一行文字的基线对齐
给第一个项目设置页面效果:
6-4
align-self: stretch;如果项目没有设置高度,或者auto会占满整个容器(默认值)
给第一个项目设置页面效果:
6-5