FLEX-SHRINK

The flex-shrink 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>
    <script>
        function mouseover(value) {
            document.getElementById("myid").getElementsByTagName("div")[0].style.flexShrink = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="0">
    <input onmouseover="mouseover(value)" type="button" value="1">
    <input onmouseover="mouseover(value)" type="button" value="2">
    <input onmouseover="mouseover(value)" type="button" value="3">
    <input onmouseover="mouseover(value)" type="button" value="4">
    <div id="myid">
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
        <div>flex-shrink</div>
    </div>
</body>
</html>

FLEX-SHRINK

SYNTAX

CSS

JS

VALUES

INITIAL

EXAMPLES

NUMBER

JS

LINKS

INTERNAL

EXTERNAL