{"id":21092,"date":"2013-04-17T10:10:12","date_gmt":"2013-04-17T17:10:12","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21092"},"modified":"2021-08-04T08:08:18","modified_gmt":"2021-08-04T15:08:18","slug":"flex-direction","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-direction\/","title":{"rendered":"flex-direction"},"content":{"rendered":"\n

The flex-direction<\/code> property is a sub-property of the Flexible Box Layout module<\/a>. It establishes the main-axis, thus defining the direction flex items are placed in the flex container.<\/p>\n\n\n\n

.element {\n  flex-direction: column-reverse;\n}<\/code><\/pre>\n\n\n\n
Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction<\/code> property.<\/p>\n\n\n\n
The flex-direction<\/code> property accepts four possible values:<\/p>\n\n\n\n
  • row<\/code>: same as text direction (default)<\/li>
  • row-reverse<\/code>: opposite to text direction<\/li>
  • column<\/code>: same as row<\/code> but top to bottom<\/li>
  • column-reverse<\/code>: same as row-reverse<\/code> top to bottom<\/li><\/ul>\n\n\n\n
    Note that row<\/code> and row-reverse<\/code> are affected by the directionality of the flex container. If its text direction is ltr<\/code>, row<\/code> represents the horizontal axis oriented from left to right, and row-reverse<\/code> from right to left; if the direction is rtl<\/code>, it’s the opposite.<\/p>\n\n\n
    Syntax<\/h3>\n\n\n
    flex-direction: row | row-reverse | column | column-reverse<\/code><\/pre>\n\n\n
    Demo<\/h3>\n\n\n
    In the following demo:<\/p>\n\n\n\n
    • Red list is set to row<\/code><\/li>
    • Yellow list is set to row-reverse<\/code><\/li>
    • Blue list is set to column<\/code><\/li>
    • Green list is set to column-reverse<\/code><\/li><\/ul>\n\n\n\n
      Note: The text direction hasn’t been edited.<\/p>\n\n\n\n