flex-direction决定主轴方向，justify-content控制子元素在主轴上的对齐方式；例如row时水平排列，center使元素居中，column时变为垂直布局，space-evenly实现等距分布，二者配合可灵活布局。
Flexbox 是 CSS 中一种强大的布局模型，特别适合在容器内对齐和分布子元素。要控制主轴方向上的排列，关键在于 flex-direction 和 justify-content 两个属性的配合使用。
flex-direction：定义主轴方向
该属性决定 Flex 容器的主轴方向，也决定了子元素的排列顺序。
常用取值包括：- row（默认）：从左到右水平排列
- row-reverse：从右到左水平排列
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
设置 display: flex; 后，通过 flex-direction 可快速切换布局流向。
justify-content：控制主轴对齐方式
这个属性用于定义子元素在主轴方向上的对齐与分布方式，具体效果受 flex-direction 影响。
立即学习“前端免费学习笔记（深入）”；
- flex-start：元素向主轴起点对齐（默认）
- flex-end：元素向主轴终点对齐
- center：居中对齐
- space-between：两端对齐，元素间间距相等
- space-around：每个元素周围有相等空间
- space-evenly：所有元素间的间距完全相同
例如，当 flex-direction: row; 时，主轴是水平的，justify-content 控制左右分布；若改为 column，则控制上下分布。
实际应用示例
假设想让几个按钮在容器中水平居中排列：
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
如果改为垂直堆叠并顶部对齐：
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
想要垂直居中且等距分布：
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
基本上就这些。理解主轴由 flex-direction 决定，而 justify-content 在该轴上进行对齐操作，就能灵活控制布局方向与元素分布。不复杂但容易忽略的是，改变方向后，原本的“左右”对齐会变成“上下”，需结合上下文理解。
