flex-direction

Description
Syntax
Examples
Links

Description

The flex-direction property for CSS specifies how flex items are placed in the flex container by setting the direction of the flex container's main axis.

Syntax

CSS

flex-direction: value;

JS

object.style.flexDirection = "value";

Values

<'flex-direction'> = column | column-reverse | row | row-reverse

Specifies how flex items are placed in the flex container by setting the direction of the flex container's main axis.

column

The flex container's main axis has the same orientation as the block axis of the current writing mode.

column-reverse

The same as column except the main-start and main-end directions are swapped.

row

The flex container's main axis has the same orientation as the inline axis of the current writing mode.

row-reverse

The same as row except the main-start and main-end directions are swapped.

Initial

row

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: flex;
        }
        .myclass > div
        {
            height: 100px;
            width: 100px;
        }
        .myclass > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, red);
        }
        .myclass > div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
        .myclass > div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, blue);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>column</button>
    <button>column-reverse</button>
    <button>row</button>
    <button>row-reverse</button>
    <div class="myclass">
        <div>flex-direction1</div>
        <div>flex-direction2</div>
        <div>flex-direction3</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass").style.flexDirection = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>