flex-direction

描述

适用于：flex容器

CSS属性 flex-direction 指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

取值

• row

  flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

• row-reverse

  表现和row相同，但是置换了主轴起点和主轴终点

• column

  flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

• column-reverse

  表现和column相同，但是置换了主轴起点和主轴终点

语法

/* 按一行摆放 */
flex-direction: row;

/* 和row一样摆放，只不过是倒过来的 */
flex-direction: row-reverse;

/* 上下那么摆放，像堆起来一样 */
flex-direction: column;

/* 和column一样，但也是倒过来放的。 */
flex-direction: column-reverse;

/* 全局值 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;