flex布局与grid布局知识点

1. Flex 布局

1.1 必知术语

序号	术语	描述
1	弹性容器	拥有 display:flex/inline-flex 属性,使用 flex 弹性布局的区块
2	弹性项目	弹性容器的”子元素”
3	主轴	弹性项目排列时参考的轴线,有水平和垂直二种
4	交叉轴	与主轴垂直的布局参考线

1.2 flex 容器属性

序号	属性	描述
1	display	元素显示类型(内部和外部)
2	flex-flow	主轴方向与项目是否允许换行
3	place-content	容器剩余空间在项目之间进行分配
4	place-items	项目在交叉轴上的对齐方式

常用属性值演示:

(1) display

序号	属性	描述
1	flex	外部块级,内部子元素弹性
2	inline-flex	外部行内,内部子元素弹性

默认外部为块级, 即display: block-flex与display:flex同义
外部内联: 指元素宽度自动收缩到内容宽度,多个该元素会同行显示

(2) flex-flow

flex-flow,是 flex-direction,flex-wrap属性的简化

序号	属性	描述
1	row nowrap	主轴水平, 不换行(默认)
2	row wrap	主轴水平, 允许换行
3	column nowrap	主轴垂直, 不换行
4	column wrap	主轴垂直,允许换行

(3) place-content

以最常见的从左到右水平排列为例,即起始线从左侧开始

序号	属性	描述
1	start	左对齐: 空间在所有项目的右侧(默认值)
2	end	右对齐: 空间在所有项目的左侧
3	center	水平居中: 空间在所有项目二端平均分配
4	space-between	二端对齐: 空间在除二端元素之外平均分配
5	space-around	分散对齐: 空间每个项目二侧平均分配
6	space-evenly	平均对齐: 空间在每个项目之间平均分配

(4) place-items

以最常见的从上到下垂直排列为例,即起始线从顶部开始

序号	属性	描述
1	stretch	拉伸: 默认值, 自动拉伸成等高列
2	start	顶对齐: 项目从交叉轴起始线开始排列
3	end	底对齐: 项目从交叉轴终止线开始排列
4	center	居中对齐: 项目在交叉轴中居中显示

1.3 flex 项目属性

序号	属性	描述
1	place-self	交叉轴上对齐某个项目
2	flex	项目在主轴中的绽放因子与宽度
3	order	项目在主轴上的顺序

(1) place-self

在块方向和内联方向上对齐单个项目,flex 特指交叉轴
是align-self,justify-self合并简写

序号	属性	描述
1	stretch	拉伸: 默认值, 自动拉伸成等高列
2	start	顶对齐: 项目从交叉轴起始线开始排列
3	end	底对齐: 项目从交叉轴终止线开始排列
4	center	居中对齐: 项目在交叉轴中居中显示

(2) flex

设置项目在主轴上的缩放因子与计算宽度
flex: flex-grow flex-shrink flex-basis

2.1 单值语法

序号	属性	描述
1	flex: 1	等价flex: 1 1 auto, 自动在主轴上收缩
2	flex: 10em	flex-basis:10em,项目宽度,覆盖width

2.2 双值语法

序号	属性	描述
1	flex: 1 2	等价flex: 1 2 auto,主轴按 1:2 分配给项目
2	flex: 1 10em	flex: 1 1 10em,项目宽度,覆盖width

2.3: 三值语法

序号	属性	描述
1	flex: 0 1 auto	默认值, 不放大,可缩小,宽度自动
2	flex: auto	flex: 1 1 auto,全响应式
3	flex: none	flex: 0 0 auto,非响应式

(3) order

规则

序号	属性	描述
1	order 0	默认值, 显示顺序与源码顺序一致
2	order: 2	显示在<2的右侧
3	order: -2	允许负数

了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

---

2. Grid 布局

2.1 必知术语

序号	术语	描述
1	网格容器	拥有 display: grid/inline-grid 属性,使用 grid 布局的区块
2	网格项目	网格容器的”子元素”
3	单元格	每个项目所在的空间, 在容器布局单元,对用户不可见
4	网格区域	由一个或多个单元格构成, 可容纳一个或外个项目

2.2 Grid 容器属性

序号	属性	描述
1	display	元素显示类型(内部和外部)
2	grid-template-rows / columns	设置显式网格
3	grid-auto-rows / columns	设置隐式网格行高/列宽
4	grid-auto-flow	设置项目在容器中排列方向
5	gap	设置轨道间隙
6	place-content	容器空间在项目中的分配方式
7	place-items	单元格空间在项目中的分配方式

常用属性值演示:

(1) display

序号	属性	描述
1	grid	外部块级,内部子元素 网格布局
2	inline-flex	外部行内,内部子元素网格布局

(2) grid-template-rows / columns: 显式网格

序号	属性值	描述
1	auto	默认值,单列多行,按源码顺序垂直排列
2	50px 60px 100px	指定行/列的固定宽度
3	1fr 2fr 1fr	fr比例, 行/列按比例占据全部空间
4	10% auto minmax(3em, 10em)	支持相对/绝对单位和最大小最小值
5	repeat(3, 1fr)	1fr 1fr 1fr简写
6	repeat(2, 20em 1fr)	20em 1fr 20em 1fr简写
7	repeat(2, 20em 1fr)	20em 1fr 20em 1fr简写
8	repeat(auto-fit, minmax(50px,1fr))	最小 50px,空间足够会发尽量充满
9	repeat(auto-fill, minmax(50px,1fr))	最小 50px,空间足够也不会放大
10	fit-content(200px)	等价于minmax(auto,max-content/200px)

难点分析:

/* auto-fit: 容器自动收容到内容宽度,没有剩余空间 */
grid-template-columns: repeat(auto-fit, 100px);
/* 容器不会自动收缩,如果内容不足会产生剩余空间 */
grid-template-columns: repeat(auto-fill, 100px);
/* 经常与minmax()配合使用,实现响应式布局 */
/* 项目最小100px,空间足够会自动伸展到全部可用空间 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* 项目最小100px,但不会自动伸展,哪怕空间足够 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* 所以, auto-fill 与 minmax配合意义不大, 不如直接使用单值 */

(3) grid-auto-rows / columns: 隐式网格

该属性描述了在网格容器之外的项目应该占据的行高/列宽
究竟是行高还是列宽,由grid-auto-flow属性决定

序号	属性值	描述
1	auto	默认值,单列多行,按源码顺序垂直排列
2	100px / 1fr	指定行/列的固定宽度
3	min-content / min-content	fr比例, 行/列按比例占据全部空间
4	minmax(100px,1fr	支持相对/绝对单位和最大小最小值

(4) grid-auto-flow: 排列方向

该属性描述了在网格容器之外的项目应该占据的行高/列宽
究竟是行高还是列宽,由grid-auto-flow属性决定

序号	属性值	描述
1	row	默认值,水平/行方向排列,空间不足换行显示
2	column	垂直/列方向排列,空间不足换列显示
3	row dense	行方向排列,尽量紧凑排列不浪费空间
4	column dense	列方向排列, 尽量紧凑排列不浪费空间

(5) gap: 轨道间隙

与margin不一样,该间隙仅存在于轨道之间
gap: row-gap column-gap简写

序号	属性值	描述
1	gap: 0	默认值, 间隙
2	gap: 10px 5px	行轨间隙 10px,列轨间隙 5px
3	gap: 1em	行与列间隙相等,都是 1em

(6) place-content

所有项目在”容器”中的对齐方式, 即剩余空间在项目之间的分配方式
属性生效前提: 容器中存在剩余空间
place-content: 块/垂直方向 内联/水平方向

序号	属性	描述
1	start start	左对齐: 空间在所有项目的右侧(默认值)
2	end end	右对齐: 空间在所有项目的左侧
3	center center	水平居中: 空间在所有项目二端平均分配
4	center	二值相同,可只写一个
5	start end	垂直向上, 水平居右
6	space-between	二端对齐: 空间在除二端元素之外平均分配
7	space-around	分散对齐: 空间每个项目二侧平均分配
8	space-evenly	平均对齐: 空间在每个项目之间平均分配

(7) place-items

所有项目在”单元格”中的对齐方式, 即剩余空间在单元格之间的分配方式
属性生效前提: “单元格”中存在剩余空间,即项目设置了width/height
语法:place-items:垂直方向 水平方向

序号	属性	描述
1	start start	左对齐: 空间在所有项目的右侧(默认值)
2	end end	右对齐: 空间在所有项目的左侧
3	center center	水平居中: 空间在所有项目二端平均分配
4	center	二值相同,可只写一个
5	start end	垂直向上, 水平居右

2.3 Grid 项目属性

(1) grid-row / column

语法:grid-row/column: 行或列起始线 / 行或列终止线或跨越的行或列数量

序号	属性	描述
1	auto	默认占据一个单元格,可不写
2	1 / 3	起始编号1, 终止编号3
3	2 / span 3	起始编号2, 跨越2列或列空间
4	span 2	省去第 1 个参数,从当前位置开始,占据二个单元空间
5	span 2 / span 2	垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域

(2) grid-area

语法:grid-area: 行起始 / 列起始 / 行结束 / 列结束
与grid-row/column相比,grid-arwa是二维的

序号	属性	描述
1	auto	默认值, 由浏览器根据项目数量自动分配
2	3 / 1 / 5 / 3	创建一个由3 / 1 / 5 / 3四个编号构成的空间
3	1 / 1 / span 3 / span 2	从 1 行 1 列开始,占据 3 行 2 列
4	span 2 / span 2	垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域
5	span 3	跨 3 行,其它默认

(2) place-self

语法:place-self: 垂直方向 水平方向
设置某个项目,在单元格中的对齐方式

序号	属性	描述
1	auto	默认值, 由浏览器根据项目数量自动分配
2	start end	垂直居上,水平居右
3	1 / 1 / span 3 / span 2	从 1 行 1 列开始,占据 3 行 2 列
4	center center	垂直,水平均居中
5	center	二值相同,可只写一个

了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout