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