[flex排版]HTML Learn Data Day 6

稍微把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 来指挥元素往哪里靠。