CSS中flex-direction属性row和column的排列差异

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来调整垂直对齐方式。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

flex-direction: column —— 垂直排列

使用column时，子元素会从上到下垂直排列。

• 主轴变成垂直方向，交叉轴变为水平方向
• 容器的高度会随着内容增加而增长
• 更适合侧边栏菜单、垂直时间线等结构

示例代码：

.container {
  display: flex;
  flex-direction: column;
}

这时候，子元素的宽度如果未指定，会默认撑满整个容器宽度。如果你想让每个子项宽度自适应，可能需要配合align-items或单独设置子项宽度。

排列差异总结

需要注意的是，一旦改变了flex-direction的方向，像justify-content和align-items这类属性的作用轴也会随之改变，要根据当前主轴和交叉轴来理解它们的行为。

基本上就这些。合理使用row和column可以快速构建出不同方向的布局结构，搭配其他Flex属性能实现更灵活的页面排版。

以上就是CSS中flex-direction属性row和column的排列差异的详细内容，更多请关注php中文网其它相关文章！