Flex Direction

Part of the Styling with CSS section of Coddy's HTML journey — lesson 45 of 76.

In CSS, the flex-direction property controls the direction in which items are arranged inside a flex container. It decides whether the items are placed in a row or a column.

This also affects how properties like justify-content and align-items work. Using flex-direction correctly helps in building flexible and responsive layouts.

Here's the basic syntax for using the flex-direction property:

.container {
    display: flex;
    flex-direction: value;
}

value: The desired direction for the flex items, which can be one of the following:

row: This is the default value. Flex items are placed in a row, from left to right. The main axis is horizontal, and the cross axis is vertical.

row-reverse: Flex items are placed in a row, from right to left. The main axis is horizontal, and the cross axis is vertical.

column: Flex items are placed in a column, from top to bottom. The main axis is vertical, and the cross axis is horizontal.

column-reverse: Flex items are placed in a column, from bottom to top. The main axis is vertical, and the cross axis is horizontal.

For example:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

In this example, the .container-row element will display its flex items in a row from left to right, the .container-row-reverse element will display them from right to left.

Challenge

Easy

You are given an HTML document with two parent <strong><div></strong> elements, each containing three child <strong><div></strong> elements. The parent <div> elements have already been set as flex containers using display: flex;. Your task is to use the flex-direction property to change the arrangement of the flex items.

Follow the steps below:

Write a CSS rule that targets the <div> element with the class container1.
- Set its flex-direction property to column to arrange the flex items in a vertical column.
Write a CSS rule that targets the <div> element with the class container2.
- Set its flex-direction property to column-reverse to arrange the flex items in a reversed column.

Cheat sheet

The flex-direction property controls the direction in which items are arranged inside a flex container:

.container {
    display: flex;
    flex-direction: value;
}

Values:

row: Default. Items placed left to right (horizontal main axis)
row-reverse: Items placed right to left (horizontal main axis)
column: Items placed top to bottom (vertical main axis)
column-reverse: Items placed bottom to top (vertical main axis)

.container-row {
    display: flex;
    flex-direction: row;
}

.container-column {
    display: flex;
    flex-direction: column;
}

Try it yourself

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>