flex-shrink

The flex-shrink CSS property sets the flex shrink factor to the provided number.

Syntax

CSS

flex-shrink: value;

JS

object.style.flexShrink = "value";

Values

<'flex-shrink'> = <number [0,∞]>

<number [0,∞]>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a positive sign (+). The last character may be succeeded by an exponent (e or E) and an integer.

Initial

Examples

1 · number

2 · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: flex;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            flex-basis: 25%;
        }
        .myclass > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">0</button>
    <button onmouseover="myfunction(innerHTML)">1</button>
    <button onmouseover="myfunction(innerHTML)">2</button>
    <button onmouseover="myfunction(innerHTML)">3</button>
    <button onmouseover="myfunction(innerHTML)">4</button>
    <div class="myclass">
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass > div").style.flexShrink = myparameter;
        }
    </script>
</body>
</html>

3 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: flex;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            flex-basis: 25%;
        }
        .myclass > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>0</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <div class="myclass">
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass > div").style.flexShrink = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>