附录：Flex布局核心知识点汇总

1. 核心术语速记

术语	描述
容器（Flex Container）	开启Flex布局的父元素，通过 display: flex 或 display: inline-flex 开启
项目（Flex Item）	容器内的子元素，会自动成为Flex项目
主轴（Main Axis）	项目排列的主要方向，默认为水平方向
交叉轴（Cross Axis）	与主轴垂直的方向，默认为垂直方向
主轴起点/终点	主轴的开始和结束位置，由 flex-direction 决定
交叉轴起点/终点	交叉轴的开始和结束位置，由 flex-direction 决定

2. 容器属性汇总

属性	描述	默认值	常用值
display	开启Flex布局	-	flex, inline-flex
flex-direction	设置主轴方向	row	row, row-reverse, column, column-reverse
flex-wrap	控制项目是否换行	nowrap	nowrap, wrap, wrap-reverse
flex-flow	flex-direction + flex-wrap 简写	row nowrap	-
justify-content	控制项目在主轴上的对齐	flex-start	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	控制项目在交叉轴上的对齐	stretch	stretch, flex-start, flex-end, center, baseline
align-content	控制多行项目在交叉轴上的对齐	stretch	stretch, flex-start, flex-end, center, space-between, space-around

3. 项目属性汇总

属性	描述	默认值	常用值
order	控制项目的排列顺序	0	任意整数
align-self	单独设置项目在交叉轴上的对齐	auto	auto, flex-start, flex-end, center, stretch, baseline
flex-grow	控制项目的放大比例	0	任意非负整数
flex-shrink	控制项目的缩小比例	1	任意非负整数
flex-basis	设置项目在主轴上的初始尺寸	auto	auto, 长度值
flex	flex-grow + flex-shrink + flex-basis 简写	0 1 auto	1, none, 0 0 <length>

4. 常用布局代码模板

水平居中

.container {
  display: flex;
  justify-content: center;
}

垂直居中

.container {
  display: flex;
  align-items: center;
  height: 300px;
}

水平垂直双居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

导航栏布局

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

卡片布局

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
}

响应式布局

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
}

@media (max-width: 768px) {
  .item {
    flex: 1 1 100%;
  }
}

5. 新手易错点对照表

问题	原因	解决方法
项目不排列	容器没有设置 display: flex	确保容器设置了 display: flex
对齐方式失效	主轴方向改变后，对齐属性的作用方向也改变	理解主轴和交叉轴的方向，选择正确的对齐属性
项目尺寸失控	flex-grow 或 flex-shrink 使用不当	合理设置 flex-grow 和 flex-shrink，需要固定尺寸时使用 flex-shrink: 0
align-content 不生效	项目只有一行，align-content 仅在多行时生效	设置 flex-wrap: wrap 并确保项目换行
flex-basis 与 width/height 冲突	flex-basis 优先级高于 width/height	理解两者的优先级关系，避免冲突
浏览器兼容性问题	旧浏览器对Flex布局支持不完善	使用浏览器前缀，提供回退方案，推荐使用现代浏览器

通过本附录的学习，你已经掌握了Flex布局的核心知识点。这些知识点是Flex布局的基础，掌握它们将帮助你更加熟练地使用Flex布局来实现各种复杂的页面布局。