flex-direction决定子元素排列方向，取值有row、row-reverse、column、column-reverse，默认row；主轴变化会改变justify-content（主轴）和align-items（交叉轴）的作用方向。

直接在父容器上设置 flex-direction，就能决定子元素是横着排还是竖着排——它不改 HTML 结构，只靠 CSS 控制流向。

flex-direction 的四个取值及效果

主轴方向决定了 justify-content 和 align-items 的作用方向。默认是 row（从左到右），但你可以显式指定：

• row：水平排列，起点在左侧（默认）
• row-reverse：水平反向，起点在右侧
• column：垂直排列，起点在顶部
• column-reverse：垂直反向，起点在底部

主轴一变，对齐方式跟着变

justify-content 始终作用于主轴，align-items 始终作用于交叉轴。比如设为 column 后：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• justify-content: center → 垂直居中（因为主轴现在是 y 轴）
• align-items: flex-start → 水平靠左（因为交叉轴变成 x 轴）

移动端常见误用提醒

只写 display: flex 不写 flex-direction，在窄屏下容易因内容撑宽导致意外换行或溢出。尤其当子元素宽度固定时：

• 想让导航菜单竖排？加 flex-direction: column
• 想让按钮组从下往上堆叠？用 flex-direction: column-reverse
• 避免小屏错乱：建议始终显式声明 flex-direction，不依赖默认值

配合 justify-content 和 align-items 才完整

单设 flex-direction 只管“怎么排”，不管“排在哪”。要真正控制布局，需搭配：

• justify-content：控制主轴上的整体分布（如 space-between、center）
• align-items：控制交叉轴上的单行对齐（如 stretch、flex-start）
• 若有多行且启用 flex-wrap: wrap，还需 align-content 控制行与行之间在交叉轴的分布

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！