flex-direction

描述

该 flex-direction 属性允许您指定弹性元素在弹性容器内的位置所依据的方向。弹性元件的方向是根据两个轴的位置形成的：弹性容器的主轴和它的横轴，它总是垂直于主轴。ltr 方向上的主轴（全局 HTML dir 属性或具有 ltr 值的 CSS 方向属性）从左到右位于，横向轴从上到下（这是默认值），对于 rtl 值，它会相应地镜像。

效果展示

语法

flex-direction: row | row-reverse | column | column-reverse;

值

• row 默认情况下，主轴与文本的方向相同，从左到右。如果将目录值指定为 rtl，则轴的方向从右到左。
• row-reverse 它看起来像一个行值，但起点和终点是交换的，主轴是从右向左定向的。如果 dir 值指定为 rtl ，则轴的方向从左到右。
• column 主轴是垂直的，从上到下指向。
• column-reverse 轴是垂直的，但起点和终点的位置会发生变化，并且轴是从下到上定向的。