Flex direction property (flex-direction)

The flex-direction property describes the direction of the flexible items.

Syntax:

selector {

}

Values:

row - Default value. Displays flexible items horizontally
row-reverse - Displays flexible items horizontally (equal to row) but in reversed order
column - Displays flexible items vertically
column-reverse - Displays flexible items vertically (equal to column) but in reversed order
initial or inherit

Example

Example of flex-direction property with row and column values:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:90%; height:200px; margin-top:15px;
    background-color:#ccc;
    color: lightblue; border: 1px solid #555; font-weight:bold;
    display: flex;
     display: -webkit-flex; /* Safari */
}
.flex {
    margin-top:10px; padding:4px;
    height:175px;
    background-color:blue;  
    flex-direction: row;
     -webkit-flex-direction: row; /* Safari 6.1+ */
}
div:nth-of-type(2n) {
    background-color:lightblue; color:blue;
    flex-direction: column-reverse;
     -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
}
</style></head>

<body>

<div>
    <div class="flex">F1</div>
    <div class="flex">F2</div>
    <div class="flex">F3</div>
    <div class="flex">F4</div>
</div>

<p>To ensure browser support, the proprietary selectors are used in styling</p>

</body>
</html>

›› go to examples ››

Flex direction property (flex-direction)

Syntax:

Values:

Example

Example of flex-direction property with row and column values:

Comments

About

Contact

Get Connected