因为 flex-direction: row 是 css 规范强制规定的默认值，它使主轴水平向右，子元素按 dom 顺序沿主轴排列，故默认从左到右；在 rtl 环境中起点右移，视觉上变为从右到左。
为什么 flex 子元素默认从左到右排？因为 flex-direction: row 是硬编码的默认值
当你给一个容器设置 display: flex，浏览器**自动应用了 5 个默认属性**，其中最关键的就是 flex-direction: row。这不是“习惯”或“推荐”，而是 CSS 规范强制规定的初始值——哪怕你一个字都不写，它也生效。
-
flex-direction: row意味着主轴是水平方向，起点在左，终点在右 - 子元素（flex items）严格按 DOM 顺序，沿主轴依次排列，所以自然从左到右
- 这个行为与文本方向（LTR/RTL）有关：在 RTL 页面中，
row仍为默认值，但起点会移到右侧（即视觉上从右到左），此时若需保持 LTR 行为，得显式写flex-direction: row或用direction: ltr
不写 flex-direction 就等于写了 row，但别依赖“不写”来控制逻辑
很多开发者误以为“没写就是没设置”，结果在调试时发现子元素死活不换行、对齐异常，根源其实是 row 在默默起作用。尤其当结合 justify-content 使用时，容易混淆“是内容没对齐”还是“主轴方向错了”。
- 错误现象：
justify-content: center看起来没效果 → 实际可能是容器宽度太小，或子元素设置了flex-shrink: 0导致无法居中 - 更隐蔽的问题：在
column布局下误用justify-content: flex-end，本意是“底部对齐”，但若主轴仍是row（忘了改），结果只是右对齐，而非纵向对齐 - 实操建议：只要布局方向不是横向，默认就该显式写出
flex-direction，避免靠记忆猜默认行为
row 和 column 不只是“横竖切换”，它们彻底翻转主轴与交叉轴
主轴（main axis）和交叉轴（cross axis）不是固定方向的坐标系，而是由 flex-direction 动态定义的。这点直接影响 justify-content 和 align-items 的作用方向。
-
flex-direction: row→ 主轴水平，justify-content控制左右，align-items控制上下 -
flex-direction: column→ 主轴垂直，justify-content控制上下，align-items控制左右 - 常见坑：
align-items: center在row下让所有子元素垂直居中；但在column下，它让所有子元素水平居中——如果子元素宽度没设，可能看起来“没变化”，其实是居中了但宽度塌陷
.container {
display: flex;
/* 下面这行不写 = 浏览器自动加 row */
flex-direction: row; /* ← 显式写出，可读性 & 可维护性更高 */
justify-content: center;
align-items: center;
}
.item {
width: 80px;
height: 40px;
background: #3498db;
}真正需要警惕的，不是“为什么默认横排”，而是“为什么我改了 justify-content 却没反应”——十有八九，你还没意识到主轴方向才是那个沉默的指挥官。
立即学习“前端免费学习笔记（深入）”；
