linear-direction#

#Introduction

The linear-direction CSS property sets how linear items are placed in the linear container defining the main axis and the direction.

Note that the values row, row-reverse are affected by the directionality of the linear container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

#Examples

css-apisrc/linear-direction/App.tsx

Code

Preview

#Syntax

linear-direction: column;

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

linear-direction: row;

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

#Values

• column

  Default value. The linear container's main-axis is defined to be the same as vertical direction.

• row

  The linear container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.

• column-reverse

  Behaves the same as column but the main-start and main-end are opposite to the content direction.

• row-reverse

  Behaves the same as row but the main-start and main-end points are opposite to the content direction.

• vertical deprecated

  Equivalent to column.

• horizontal deprecated

  Equivalent to row.

• horizontal-reverse deprecated

  Equivalent to row-reverse.

• vertical-reverse deprecated

  Equivalent to column-reverse.

#Formal definition

#Formal syntax

linear-direction = column | row | column-reverse | row-reverse

#Difference between web

• No such style in Web.

#Compatibility