Programming for beginners: Understanding the CSS flex-direction Property for Flexbox Layouts flex-direction property

The flex-direction property defines the direction in which the flex items (the children of a flex container) are placed in the flex container.

1. row (default)

· Flex items are placed in a row, horizontally, from left to right.

· The main axis is horizontal (from left to right), and the cross axis is vertical (from top to bottom).

· Example: flex-direction: row;

2. row-reverse

· Flex items are placed in a row, horizontally, but in the reverse order, from right to left.

· The main axis is still horizontal, but the order of items is reversed.

· Example: flex-direction: row-reverse;

3. column

· Flex items are placed in a column, vertically, from top to bottom.

· The main axis is vertical (from top to bottom), and the cross axis is horizontal (from left to right).

· Example: flex-direction: column;

4. column-reverse

· Flex items are placed in a column, vertically, but in the reverse order, from bottom to top.

· The main axis is still vertical, but the order of items is reversed.

· Example: flex-direction: column-reverse;

flex-direction.html

<!DOCTYPE html>
<html>
<head>
    <style>
        .title{
            background-color: lightgray;
            color: black;
            font-size: 25px;
            margin: 10px;
        }

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

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

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

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

        .item {
            background-color: deepskyblue;
            padding: 10px;
            margin: 10px;
            color: white;
        }

    </style>
</head>
<body>
    <h1 class="title">flex-direction: row</h1>
    <div class="row-direction-container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>

    <h1 class="title">flex-direction: row-reverse</h1>
    <div class="row-reverse-direction-container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>

    <h1 class="title">flex-direction: column</h1>
    <div class="column-direction-container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>

    <h1 class="title">flex-direction: column-reverse</h1>
    <div class="column-reverse-direction-container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</body>
</html>

Previous Next Home

Programming for beginners

Sunday, 19 January 2025

Understanding the CSS flex-direction Property for Flexbox Layouts flex-direction property

No comments:

Post a Comment