# 教学内容
## 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)` |
难点分析:
css
/* 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>
flex,grid布局
flex,grid布局
温馨提示：
本文最后更新于2025年01月01日，已超过13天没有更新，若内容或图片失效，请留言反馈。
版权属于：
ltmuxin
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)