flex-direction控制主轴方向，决定排列起点和终点；row默认左→右，row-reverse右→左，column上→下，column-reverse下→上；justify-content始终作用于主轴，order仅改变视觉顺序不影响dom。
flex-direction 控制主轴方向，决定排列起点和终点
直接改 flex-direction 是最常用、最直观的方式。它不改变 HTML 结构，只翻转视觉流向，且所有子元素顺序整体跟随变化。
-
flex-direction: row（默认）：从左到右排，justify-content: flex-start靠左对齐 -
flex-direction: row-reverse：从右到左排，justify-content: flex-start实际靠右对齐 -
flex-direction: column：从上到下排，justify-content: flex-start靠顶对齐 -
flex-direction: column-reverse：从下到上排，justify-content: flex-start实际靠底对齐
注意：justify-content 始终作用于主轴，所以改了 flex-direction 后，它的“左/右/上/下”含义会跟着变。别在 column 下还用 justify-content: center 想水平居中——那其实是垂直居中。
order 属性微调单个元素的视觉顺序
当需要局部调整（比如把第三个元素提到最前面），又不想动 HTML 结构或整体翻转时，用 order。
- 默认值是
order: 0，数值越小，越靠前渲染 -
order: -1比0更优先，order: 2会排在所有order: 0和order: 1后面 - 相同
order值的元素，仍按 HTML 源码顺序排列 - 它只影响视觉顺序，不影响 DOM 顺序、屏幕阅读器读取顺序或
document.querySelectorAll返回的节点顺序
示例：<div class="item" style="order: -1">我排第一</div>
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
flex-wrap + flex-direction 决定换行后新行的位置
多行布局下，flex-wrap 和 flex-direction 共同决定新行堆叠方向，这直接影响“上下左右”的视觉顺序逻辑。
-
flex-direction: row; flex-wrap: wrap：新行从上往下叠（默认） -
flex-direction: row; flex-wrap: wrap-reverse：新行从下往上叠（第一行在底部） -
flex-direction: column; flex-wrap: wrap：新列从左往右叠 -
flex-direction: column; flex-wrap: wrap-reverse：新列从右往左叠
这个组合容易被忽略，尤其在响应式断点里加了 flex-wrap: wrap 却没同步检查 wrap-reverse 是否导致内容“反向溢出”。
Grid 布局里不能用 order，得换思路
如果父容器用了 display: grid，order 属性完全无效。想调顺序，必须用 grid-row / grid-column 显式定位，或者靠 grid-auto-flow: row dense 或 column dense 触发自动重填空缺。
-
grid-auto-flow: column会让项目按列优先填充，视觉上像“竖着读” -
grid-template-areas是最可控的方式，但要提前规划好命名区域 - 别指望在 Grid 里复用 Flex 的
order习惯——这是两个模型的根本差异
真正难的不是记住哪条属性管哪件事，而是每次写 justify-content 或 align-items 前，先确认当前 flex-direction 是什么，否则对齐方向就错了。顺序问题本质是轴向理解问题，不是属性罗列问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
