CSS flex-direction Property

Flex-direction is a sub-property of the flexible box layout module. It established the flexible item's main axis. The primary axis is the flex item's main axis. It is not always horizontal; it is primarily determined by the flex-direction property.

Note: The flex property is ineffective when the element is not a flexible item.

Syntax

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 250px;
        height: 50px;
        border: 1px solid #212b36;
        display: flex;
        flex-direction: row-reverse;
    }
    .box div {
        width: 50px;
        height: 50px;
    }
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
row	The default value. The flexible items are displayed in a row horizontally.
row-reverse	Row is the same as row, but in reverse order.
column	The flexible items are arranged in a column and displayed vertically.
column-reverse	Column is the same as the row, but in reverse order.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
flex-direction	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

flex-basis

flex-flow

CSS flex-direction Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us