flex-shrink

osbo.com | CSS | Properties | flex-shrink

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

flex-shrink: value;

object.style.flexShrink = "value";

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

<!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

flex-basis

flex-grow

World Wide Web Consortium (W3C)

Syntax

CSS

JS

Values

Initial

Examples

number

JS

Links

Internal

External