Set how the item will shrink relative to the rest with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, let us look at the way to set how much the item will shrink relative to the rest of the elements in JavaScript.

To set item shrink relative to the rest of the elements, we can utilize JavaScript's flexShrink property. Let's take a quick look at this.

Using the Styel flexShrink Property

The flexShrink property specifies how much a flex item will shrink according to the other items in the same container. The element must be flexible for the flexShrink property to function.

The property's value functions as a ratio. For instance, 2:3 sets 2 to the first item and 3 to the second item.

Users can follow the syntax below to use the flexShrink property.

Syntax

object.style.flexShrink = "number|initial|inherit"

The syntax above sets the flexShrink value to the item's style.

Values

number − Specifies the value of the item shrink according to the other items. Only positive values are acceptable for the number. The default value is 1.
initial − Sets this property's default value.
inherit − Takes on the parent element's property.

Return Value

A string that represents the flexShrink property is the return value.

Example 1

In this example, three flexible items and three sets of radio options are available. Each radio option set has values from 1 to 5.

The function sets the flexShrink value for each block when the user clicks the radio button. A block having flexShrink '1' will not change. The remaining three blocks shrink according to the flexShrink value. The higher the flexShrink value, item shrinks.


<html>
<head>
   <style>
      #flxShrCont {
         width: 100%;
         border: 1px solid black;
         display: flex;
      }
      #flxShrCont div {
         width: 100%;
      }
      #flxShrCont div:nth-child(odd) {
         background-color: lightblue;
      }
   </style>
</head>
<body>
   <h2> Setting the item shrink value relative to the rest of the elements using the <i> flexShrink property </i>
   </h2>
   <div id="flxShrWrap">
      <p> Choose flexShrink for block 1 </p>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="5"> 5 </input>
      <p> Choose flexShrink for block 2 </p>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="5"> 5 </input>
      <p> Choose flexShrink for block 3 </p>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="5"> 5 </input>
   </div>
   <br>
   <br>
   <div id="flxShrCont">
      <div> Block 1 </div>
      <div> Block 2 </div>
      <div> Block 3 </div>
   </div>
   <script>
      function getRadioValue(groupName) {
         var radios = document.getElementsByName(groupName);
         for (i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
               return radios[i].value;
            }
         }
         return null;
      }
      var flxShrCont = document.getElementById("flxShrCont");
      var flxShrEl = flxShrCont.getElementsByTagName("DIV");

      function setFlexShrink1() {
         flxShrEl[0].style.flexShrink = getRadioValue("flxShrRad1");
      }

      function setFlexShrink2() {
         flxShrEl[1].style.flexShrink = getRadioValue("flxShrRad2");
      }

      function setFlexShrink3() {
         flxShrEl[2].style.flexShrink = getRadioValue("flxShrRad3");
      }
   </script>
</body>
</html>

Example 2

In this program, we have two flexible items. Users can give input for this program using the dropdown. The program traces dropdown change action with two functions.

Suppose the user selects 1 and 5. The orange box gets a flexShrink value of 1. The red box gets 5. The red box shrinks more than the orange box.


<html>
<head>
   <style>
      input {
         width: 100%;
      }
      #flxShrUsrCont {
         width: 100%;
         border: 1px solid black;
         display: flex;
      }
      #flxShrUsr1,
      #flxShrUsr2 {
         border: 1px solid #000000;
         width: 500px;
         color: #ffffff;
      }
      #flxShrUsr1 {
         background-color: orange;
      }

      #flxShrUsr2 {
         background-color: red;
      }
      #flxShrUsrErr {
         color: red;
         display: none;
      }
   </style>
</head>
<body>
   <h2> Setting the shrinking value of the item relative to the rest of the elements using the <i> flexShrink property value through the dropdown </i>
   </h2>
   <p>Choose flexShrink for orange box</p>
   <select id="flxShrUsrSel1" onchange="setFlexShrinkOrange()">
      <option selected/> 1
      <option/> 2
      <option/> 3
      <option/> 4
      <option/> 5
   </select>
   <p>Choose flexShrink for red box</p>
   <select id="flxShrUsrSel2" onchange="setFlexShrinkRed()">
      <option selected/> 1
      <option/> 2
      <option/> 3
      <option/> 4
      <option/> 5
   </select>
   <br>
   <br>
   <div id="flxShrUsrWrap">
      <div id="flxShrUsrErr"> Please enter the flexShrink values and click the button </div>
   </div>
   <br>
   <br>
   <div id="flxShrUsrCont">
      <div id="flxShrUsr1"> Orange </div>
      <div id="flxShrUsr2"> Red </div>
   </div>
   <script>
      function setFlexShrinkOrange() {
         var flxShrUsrSelTag1 = document.getElementById("flxShrUsrSel1");
         var flxShrUsrSelIndx1 = flxShrUsrSelTag1.selectedIndex;
         var flxShrUsrSelStat1 = flxShrUsrSelTag1.options[flxShrUsrSelIndx1].text;
         var flxShrUsr1 = document.getElementById("flxShrUsr1");
         flxShrUsr1.style.flexShrink = flxShrUsrSelStat1;
      }
      function setFlexShrinkRed() {
         var flxShrUsrSelTag2 = document.getElementById("flxShrUsrSel2");
         var flxShrUsrSelIndx2 = flxShrUsrSelTag2.selectedIndex;
         var flxShrUsrSelStat2 = flxShrUsrSelTag2.options[flxShrUsrSelIndx2].text;
         var flxShrUsr2 = document.getElementById("flxShrUsr2");
         flxShrUsr2.style.flexShrink = flxShrUsrSelStat2;
      }
   </script>
</body>
</html>

This tutorial taught us to set the flexShrink property. This property controls how much an item shrinks according to the rest of the elements.

Shubham Vora

Updated on: 15-Nov-2022

197 Views

Kickstart Your Career

Get certified by completing the course

Get Started