Post
Ask Question

Understanding FlexBox: Flex Direction

Flex-direction is a CSS property that controls the main axis and direction of flex items within a flex container. It determines the layout orientation, arranging items horizontally or vertically.

If you're new to Flexbox, I highly recommend checking out my article: Introduction To FlexBox: A Powerful Layout Model

Possible values for flex-direction

  1. row: This is the default value, arranging flex items horizontally, from left to right.
  2. row-reverse: Similar to, but arranges items horizontally from right to left.
  3. column: Arrange flex items vertically, from top to bottom.
  4. column-reverse: Similar to, but arranges items vertically from bottom to top.

Let me explain this with an example.

Step 1. Create an index.html & index.css file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Container</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <div class="container">
        <div class="flex-item item1">HTML</div>
        <div class="flex-item item2">CSS</div>
        <div class="flex-item item3">JavaScript</div>
        <div class="flex-item item4">React</div>
        <div class="flex-item item5">Angular</div>
        <div class="flex-item item6">Vue</div>
        <div class="flex-item item7">Blazor</div>
    </div>
    
</body>
</html>

index.css

.container{
    display: flex;
    border: 2px solid black;
}

.flex-item{
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
}


.item1{
    background-color: violet;
}

.item2{
    background-color: indigo;
}

.item3{
    background-color: blue;
}

.item4{
    background-color: Green;
}

.item5{
    background-color: yellow;
}

.item6{
    background-color: orange;
}
.item7{
    background-color: red;
}

Step 2. Set the flex-direction property of the container class to 'row'.

.container{
    display: flex;
    flex-direction: row;
    border: 2px solid black;
}

Step 3. Run the index.html file in a browser.

Html File

The default value for flex-direction is 'row'. Therefore, even if this property is not explicitly specified, flex items will be arranged horizontally.

Possible values for flex-direction.

  1. row: This is the default value, arranging flex items horizontally, from left to right.
  2. row-reverse: Similar to row, but arranges items horizontally from right to left.
  3. column: Arrange flex items vertically, from top to bottom.
  4. Column-reverse: This is similar to the column, but it arranges items vertically from bottom to top.

Step 4. Set the flex-direction property of the container class to 'row-reverse'.

.container{
    display: flex;
    flex-direction: row-reverse;
    border: 2px solid black;
}

Output

Output

Here's what row-reverse does.

  • Reverses the horizontal order: Instead of arranging flex items from left to right (which is the default behavior with row), row-reverse arranges them from right to left.
  • Maintains horizontal orientation: The overall layout remains horizontal, but the order of items is flipped.

Step 5. Set the flex-direction property of the container class to 'column'.

.container{
    display: flex;
    flex-direction: column;
    border: 2px solid black;
}

Output

File Output

Here's what the column does.

  • Sets the main axis to vertical: When flex-direction is set to column, the main axis of the flex container becomes vertical.
  • Arrange items vertically: Flex items are stacked one above the other, from top to bottom.

Step 6. Set the flex-direction property of the container class to 'column-reverse'.

.container{
    display: flex;
    flex-direction: column-reverse;
    border: 2px solid black;
}

Output

Output

Here's what column-reverse does.

  • Sets the main axis to vertical: Similar to a column, the main axis of the flex container becomes vertical.
  • Arrange items vertically in reverse order: Flex items are stacked one above the other, but from bottom to top.

By effectively utilizing flex-direction, you can effortlessly create dynamic and responsive layouts.

Happy Coding!


Similar Articles