flex-direction 属性决定 Flex 容器中子元素的主轴方向,可选值包括 row(默认,从左到右)、row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上),常用于移动端菜单竖排布局、聊天消息堆叠等场景。

flex-direction 属性用于定义 Flex 容器中子元素的排列方向。它决定了主轴的方向,从而影响子项在容器中的布局顺序。
基本用法
该属性应用于 flex 容器(即设置了 display: flex 或 display: inline-flex 的元素),可选值包括:
- row:子元素从左到右水平排列(默认值)
- row-reverse:子元素从右到左水平排列
- column:子元素从上到下垂直排列
- column-reverse:子元素从下到上垂直排列
视觉效果说明
假设有一组 div 子元素,在不同 flex-direction 下的表现:
- 使用 row 时,项目横向排成一行
- 使用 column 时,项目纵向堆叠,类似块级元素
- reverse 类型会反转原本的显示顺序
实际应用场景
这个属性适合需要切换布局方向的情况:
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看
立即学习“前端免费学习笔记(深入)”;
- 移动端菜单由横排改为竖排时可用 column
- 聊天界面消息按时间从下往上堆叠可用 column-reverse
- 需要镜像布局时使用 row-reverse
基本上就这些,flex-direction 是控制 flex 布局主轴方向的基础属性,理解它有助于掌握整个弹性盒模型的排列逻辑。








