第一题笔记 以及第七题和第九题可检测通过的代码

Flex 布局（弹性布局）基础知识

Flex 是 CSS3 中最常用、最强大的布局方式，专门用来解决一维布局（一行 / 一列）的对齐、分布、自适应问题，彻底告别传统的浮动、定位难题。

一、核心概念

1. 容器：给元素设置display: flex，这个元素就是Flex 容器，它的直接子元素自动成为Flex 项目。
2. 两根轴：
   • 主轴：默认水平向右（项目排列的方向）
   • 交叉轴：默认垂直向下（垂直于主轴）
3. 所有布局属性，要么给容器设置（控制整体排列），要么给项目设置（控制单个项目）。

二、容器的 6 个核心属性（必记）

1.display: flex

开启 Flex 布局，块级元素独占一行；display: inline-flex行内弹性容器，不独占一行。

2.flex-direction：主轴方向（项目排列方向）

css

flex-direction: row; /* 默认：水平从左到右 */ flex-direction: row-reverse; /* 水平从右到左 */ flex-direction: column; /* 垂直从上到下 */ flex-direction: column-reverse; /* 垂直从下到上 */

3.flex-wrap：是否换行

css

flex-wrap: nowrap; /* 默认：不换行，项目挤在一行 */ flex-wrap: wrap; /* 自动换行，第一行在上方 */ flex-wrap: wrap-reverse; /* 反向换行，第一行在下方 */

4.justify-content：主轴对齐方式

css

justify-content: flex-start; /* 默认：左对齐/上对齐 */ justify-content: flex-end; /* 右对齐/下对齐 */ justify-content: center; /* 居中 */ justify-content: space-between;/* 两端对齐，项目之间等距 */ justify-content: space-around; /* 项目两侧等距 */ justify-content: space-evenly; /* 项目之间间距完全相等（最常用） */

5.align-items：单行交叉轴对齐方式

css

align-items: flex-start; /* 交叉轴起点对齐 */ align-items: flex-end; /* 交叉轴终点对齐 */ align-items: center; /* 交叉轴居中 */ align-items: stretch; /* 默认：项目拉伸占满容器高度 */ align-items: baseline; /* 项目第一行文字基线对齐 */

6.align-content：多行交叉轴对齐方式

（只有项目换行后才生效）

css

align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; /* 默认 */

三、项目的 6 个核心属性

给容器内的子元素设置，控制单个项目：

1.flex（最常用！简写）

flex: 数字→ 项目的占比 / 拉伸比例

css

flex: 1; /* 平分剩余空间，自适应填满 */

2.align-self

单独控制某个项目的交叉轴对齐，覆盖容器的align-items

css

align-self: auto | flex-start | flex-end | center | baseline | stretch;

3.order

项目排列顺序，数字越小越靠前，默认 0

css

order: -1; /* 排到最前面 */

4. 完整项目属性

• flex-grow：放大比例（默认 0，不放大）
• flex-shrink：缩小比例（默认 1，空间不足会缩小）
• flex-basis：项目在主轴上的初始宽度 / 高度

四、最实用的 3 个高频用法

1. 水平垂直居中（一行代码搞定）

css

.container { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ }

2. 子元素自动平分宽度

css

.container { display: flex; } .item { flex: 1; } /* 所有子元素宽度相等 */

3. 两端对齐

css

.container { display: flex; justify-content: space-between; }

五、快速记忆口诀

1. 父元素开flex，子元素自动变项目
2. 主轴对齐用justify，交叉轴对齐用align
3. 自适应填满写flex:1
4. 水平垂直居中：justify + align都设center

总结

1. Flex 是一维布局，控制一行 / 一列的排列；
2. 核心分容器属性（控制整体）和项目属性（控制单个）；
3. 日常开发 90% 场景只用：display:flex、justify-content、align-items、flex:1。

第七题以及第九题