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

number

JS

<!doctype html>
<html>
<head>
    <style>
        #myid
        {
            display: flex;
        }
        #myid > div
        {
            background-image: linear-gradient(135deg, white, gray);
            flex-basis: 25%;
        }
        #myid > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <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 id="myid">
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
    </div>
    <script>
        function myfunction(myvar)
        {
            document.querySelector("#myid").querySelector("div").style.flexShrink = myvar;
        }
    </script>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

number

JS

Links

Internal

External