#flex-direction

#介绍

定义弹性容器中的元件排列方向，该方向作为弹性容器的布局主轴，另外一个方向称为交叉轴。

#使用示例

<Go/>

css-apisrc/flex-direction/App.tsx

Code

预览

请注意，值 row 和 row-reverse 受弹性容器的 direction 影响。如果它的 direction 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl 或者 lynx-rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

#语法

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

#取值

• row

  默认值。flex 容器中的元件按照文本方向进行布局。主轴的方向和文本方向一致。

• row-reverse

  和 row 的表现一致，但是置换了主轴起点和主轴终点。

• column

  flex 容器中的元件按照书写模式的方向进行布局，主轴的方向和书写模式的方向一致。

• column-reverse

  和 column 表现一致，但是置换了主轴起点和主轴终点。

#形式定义

#形式语法

flex-direction =
  row             |
  row-reverse     |
  column          |
  column-reverse

#兼容性