flex-flow

Description
Syntax
Examples
Links

Description

The flex-flow property for CSS is shorthand for flex-direction and flex-wrap.

Syntax

CSS

flex-flow: value;

JS

object.style.flexFlow = "value";

Values

<'flex-flow'> = <'flex-direction'> || <'flex-wrap'>

<'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.

<'flex-wrap'> = nowrap | wrap | wrap-reverse

Controls whether the flex container is single-line or multi-line and the direction of the cross-axis which determines the direction new lines are stacked in.

nowrap

The flex container is single-line.

wrap

The flex container is multi-line.

wrap-reverse

The same as wrap except the cross-start and cross-end directions are swapped.

<!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><br>
    <button>column</button>
    <button>column-reverse</button>
    <button>row</button>
    <button>row-reverse</button><br>
    <button>nowrap</button>
    <button>wrap</button>
    <button>wrap-reverse</button>
    <div class="myclass">
        <div>flex-flow1</div>
        <div>flex-flow2</div>
        <div>flex-flow3</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const myproperty = myparameter.target.innerHTML;
            const mystyle = document.querySelector(".myclass").style;
            mystyle.flexFlow = myproperty;
            mystyle.width = "auto";
            if(myproperty.includes("wrap"))
            {
                mystyle.width = "100px";
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>