flexShrink Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flexShrink

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. flexShrink

Description

The flexShrink property sets how the item will shrink relative to the rest of the flexible items.

Property Values

Value Description
number A number specifying how much the item will shrink relative to the rest of the flexible items. Default value is 0
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 1
Return Value: A String, representing the flex-shrink property of an element
CSS VersionCSS3

Let the blue DIV element shrink five times more than the rest of the flexible items:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from w w  w . j  a v a 2 s .com
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex-grow: 1; /* Safari 6.1+ */
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
    -webkit-flex-basis: 300px; /* Safari 6.1+ */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 300px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("myBlueDiv").style.WebkitFlexShrink = "5"; // Safari 6.1+
    document.getElementById("myBlueDiv").style.flexShrink = "5";
}
</script>

</body>
</html>

Related Tutorials