flex-direction property

Specifies the direction of the main axis which specifies how the flex items are displayed in the flex container.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name, flex-direction, which is preferred for better standards compliance and future compatibility.

This property is read/write.

Flexible Box Layout ModuleIE11

 

Syntax

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

Property values

One of the following display order values.

row

Sets the flex container's main axis to the same orientation as the inline axis of the current writing mode.

row-reverse

Same as row, but with the start and end points of the axis reversed.

column

Sets the flex container's main axis to be the same orientation as the block axis (the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes) of the current writing mode. Flex items are displayed in the same order that they are declared in the source document, from top to bottom.

column-reverse

Same as column, but with the start and end points of the axis reversed.

CSS information

Applies Toflex containers
Mediavisual
Inheritedno
Initial Valuerow

Standards information

Remarks

The main axis determines the direction of items placed inside a flex container.

The reverse values do not reverse box ordering like writing-mode and direction, they only change the direction of flow. Painting, speech, and sequential navigation orders are not affected.

Examples

The CSS examples and images show the different values for flex-direction using the HTML snippet below. This flex container contains three flex items, has a height of 170 pixels, and a grey border.


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

In the CSS below, flex-direction is set to row. The flex container's main axis is set to the same orientation as the inline axis of the current writing mode, which for this example is the default, left-to-right.

A flex container with flex-direction set to row


#flexContainer {
   height: 170px;
   border: solid 1px #949494;
   display: flex;
   flex-direction: row;
}

In the CSS below, flex-direction is set to row-reverse. This example is similar to the row example above, but with the start and end points of the axis reversed.

A flex container with flex-direction set to row-reverse


#flexContainer {
   height: 170px;
   border: solid 1px #949494;
   display: flex;
   flex-direction: row-reverse;
}

In the CSS below, flex-direction is set to column. In this example, the flex container's main axis is set to be the same orientation as the block axis (the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes) of the current writing mode. Flex items are displayed in the same order that they are declared in the source document, from top to bottom.

A flex container with flex-direction set to column


#flexContainer {
   height: 170px;
   border: solid 1px #949494;
   display: flex;
   flex-direction: column;
}

In the CSS below, flex-direction is set to column-reverse. This example is similar to the column example above, but the start and end points of the axis reversed.

A flex container with flex-direction set to column-reverse


#flexContainer {
   height: 170px;
   border: solid 1px #949494;
   display: flex;
   flex-direction: column-reverse;
}

See also

CSSStyleDeclaration
flex-flow

 

 

Show:
© 2014 Microsoft