稍微把js中的dom看了一下，感觉大部分是由于历史包袱导致的繁琐 API，现阶段不需要死记硬背，用到时查阅即可。
不想去背，把其他的知识看了一下。于是转头回来学css
今天稍微看了一下flex相关内容，由于浮动不被建议学，所以浮动没有去看了
下一次就直接学vue3相关了
Flex 布局
Flex没什么特别深奥的，它非常像 Qt 中的Spacer(弹簧) 或 Layout 系统。
Flex 专为模块化的网页布局而生，能轻松地将网页划分为一个个区块，并自动处理排版，告别了手动计算长宽占比的痛苦时代。
1. 核心概念：轴向 (Axis)
Flex 布局主要由两个轴决定：主轴 (Main Axis)和侧轴 (Cross Axis)。
- 主轴：默认为横向（
row），即从左到右。 - 侧轴：与主轴垂直，默认为纵向，即从上到下。
默认行为注意：
- 主轴尺寸：在未设置具体宽度时，主轴方向的长度默认由内容撑开。
- 侧轴尺寸：在未设置具体高度时，子元素默认会在侧轴方向拉伸填满（前提是
align-items为stretch且子元素没有写死高度）。
2. 父容器属性 (Container Properties)
根据代码实践，整理了常用的 Flex 容器属性：
| 属性 | 作用 | **常见取值 ** |
|---|---|---|
| display | 开启 Flex 布局 | flex |
| justify-content | 主轴方向的排列方式 | flex-start(左/上)center(居中)space-between(两端对齐，中间留空)space-around(每个元素周围分配空间) |
| align-items | 侧轴方向的单行对齐方式 | stretch(默认，拉伸)center(居中)flex-end(底部对齐，防止拉伸) |
| flex-wrap | 控制子元素是否换行 | nowrap(默认，不换行，强行挤压)wrap(换行，多行显示) |
| align-content | 侧轴方向的多行对齐方式(仅在flex-wrap: wrap时生效) | space-between(多行之间拉开)center(多行整体居中)flex-start(多行紧贴顶部) |
3. 子元素属性 (Item Properties)
Flex 不仅控制容器，还能控制子元素如何分配空间（这才是“弹簧”的精髓）：
flex 属性：
这是 flex-grow、flex-shrink 和 flex-basis 的简写。
flex: 1;：表示该子元素占用父容器的剩余空间的 1 份。- 如果所有子元素都设为
flex: 1，则它们平分剩余空间。 - 如果一个设为
flex: 1，另一个设为flex: 3，则后者占据的空间是前者的 3 倍。
4. 实战代码演示
结合 HTML 练习代码的总结：
CSS
.box { display: flex; /* 1. 主轴对齐：两端对齐，中间留空 */ justify-content: space-between; /* 2. 允许换行：一行放不下时自动折行 */ flex-wrap: wrap; /* 3. 多行侧轴对齐：行与行之间两端对齐 */ align-content: space-between; /* 4. 单行侧轴对齐：如果子元素写死了高度，需注意该属性 */ /* align-items: flex-end; */ width: 500px; height: 400px; background-color: pink; border: 2px solid; } .box div { /* 子元素如果有固定宽高，就不会被默认拉伸，除非 align-items 强制拉伸 */ width: 100px; height: 100px; border: 1px solid; } /* 进阶：单独控制某个子元素的“弹簧”系数 */ /* .box div:nth-child(2) { flex: 1; // 自动吸收剩余空间 } */总结
Flex 布局的核心在于“轴”的概念以及“剩余空间”的分配。只要搞清楚主轴是横还是竖，剩下的就是用justify和align来指挥元素往哪里靠。
