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