flex-direction属性在flexbox布局中有row和column两个常见值。1. row使子元素水平排列，主轴为水平方向，默认从左到右排列，适用于导航栏、横向卡片列表等场景；2. column使子元素垂直排列，主轴为垂直方向，默认从上到下排列，适合侧边栏菜单、垂直时间线等结构。两者影响容器的宽度或高度变化方式及对齐行为，合理使用可快速构建不同方向的布局。
在CSS的Flexbox布局中，flex-direction属性决定了弹性容器内子元素的排列方向。最常见的两个值是row和column，它们直接影响布局的整体结构和视觉效果。
flex-direction: row —— 水平排列
当设置为row时，子元素会从左到右依次水平排列，这是Flex容器的默认行为。
- 子元素默认不会换行，超出容器宽度后可能会压缩内容
- 主轴（main axis）是水平方向，交叉轴（cross axis）是垂直方向
- 适用于导航栏、横向卡片列表等场景
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: row;
}在这种情况下，即使某个子项高度不一致，整体也会按照交叉轴对齐（默认顶部对齐），除非你额外设置align-items来调整垂直对齐方式。
flex-direction: column —— 垂直排列
使用column时，子元素会从上到下垂直排列。
- 主轴变成垂直方向，交叉轴变为水平方向
- 容器的高度会随着内容增加而增长
- 更适合侧边栏菜单、垂直时间线等结构
示例代码：
.container {
display: flex;
flex-direction: column;
}这时候，子元素的宽度如果未指定，会默认撑满整个容器宽度。如果你想让每个子项宽度自适应，可能需要配合align-items或单独设置子项宽度。
排列差异总结
| 特性 | row |
column |
|---|---|---|
| 主轴方向 | 水平 | 垂直 |
| 默认对齐方式 | 左对齐、顶部对齐 | 顶部对齐、左侧对齐 |
| 容器宽度变化影响 | 内容超出可能压缩或溢出 | 高度随内容自动拉长 |
| 典型应用场景 | 导航条、横向滚动区域 | 侧边栏、垂直信息展示 |
需要注意的是，一旦改变了flex-direction的方向，像justify-content和align-items这类属性的作用轴也会随之改变，要根据当前主轴和交叉轴来理解它们的行为。
基本上就这些。合理使用row和column可以快速构建出不同方向的布局结构，搭配其他Flex属性能实现更灵活的页面排版。
