课堂随笔14

一、Flex布局基础前置知识

1. 核心轴线定义

开启  display: flex  的容器为弹性容器，容器内子元素为弹性项，布局存在两条核心轴线：

1. 主轴（main axis）：弹性项默认排列的方向，默认水平从左到右
2. 交叉轴（cross axis）：与主轴垂直的方向，默认垂直从上到下

2. 关键属性区分

• 主轴对齐：使用 justify-content 属性（控制子元素在主轴上的整体对齐、分布方式）
• 交叉轴对齐：使用 align-items 属性（控制子元素在交叉轴上的对齐方式）

备注：两条轴线的对齐属性作用对象都是弹性容器，写在父元素上

3. 默认前提

默认主轴方向： flex-direction: row （水平向右），所有对齐效果均基于此默认值讲解。

二、主轴对齐方式（justify-content 5种取值）

作用：控制一行内所有弹性项在主轴方向的对齐、间距分布，仅对弹性项整体生效

1. justify-content: flex-start（默认值）

• 效果：所有弹性项靠主轴起始端对齐
• 默认主轴（水平）：子元素整体靠左排列，无多余间距
• 场景：常规默认布局、元素左对齐排列

2. justify-content: flex-end

• 效果：所有弹性项靠主轴末端对齐
• 默认主轴（水平）：子元素整体靠右排列
• 场景：页面右侧功能按钮、尾部元素对齐

3. justify-content: center

• 效果：所有弹性项整体居中对齐
• 默认主轴（水平）：子元素整体在容器水平正中间
• 场景：导航居中、内容模块居中展示

4. justify-content: space-between

• 效果：两端对齐，中间均分间距
• 规则：第一个元素贴主轴起点，最后一个元素贴主轴终点，剩余空白空间均匀分配在子元素之间
• 特点：元素左右无外边距，只有中间间距
• 场景：导航栏分布、卡片均分布局、左右两端内容排版

5. justify-content: space-around

• 效果：元素两侧均分空白间距
• 规则：每个弹性项左右都有相等的空白间距，相邻元素间距会叠加
• 特点：首尾元素距离容器有间距，整体均匀环绕
• 场景：多按钮均匀排布、少量内容均分展示

补充区分：
space-between：贴边、中间有间距
space-around：不贴边、元素四周有均等间距

三、交叉轴对齐方式（align-items 5种取值）

作用：控制单行弹性项在交叉轴方向的对齐方式，默认交叉轴为垂直方向

1. align-items: stretch（默认值）

• 效果：拉伸铺满交叉轴
• 规则：如果子元素未设置高度，会自动拉伸填满容器的垂直高度；设置高度后，失效
• 场景：自适应等高卡片、通栏填充布局

2. align-items: flex-start

• 效果：所有弹性项靠交叉轴起始端对齐
• 默认交叉轴（垂直）：子元素整体顶部对齐

3. align-items: flex-end

• 效果：所有弹性项靠交叉轴末端对齐
• 默认交叉轴（垂直）：子元素整体底部对齐

4. align-items: center

• 效果：所有弹性项在交叉轴居中对齐
• 默认交叉轴（垂直）：子元素垂直居中
• 高频场景：水平+垂直居中（搭配 justify-content: center 实现完美居中）

5. align-items: baseline

• 效果：按文字基线对齐
• 规则：忽略元素高度、边距差异，以子元素内部文字的基线位置统一对齐
• 场景：不同大小文字、图标+文字组合的对齐排版