Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the length of the item relative to the rest with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the flex property in JavaScript to set the length of flex items relative to each other. The flex property controls how much space a flex item should take up within a flex container.

Syntax

element.style.flex = "value";

The flex value can be a number (flex-grow), or a combination of flex-grow, flex-shrink, and flex-basis values.

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 300px;
            height: 400px;
            display: flex;
         }
         
         #box div {
            margin: 2px;
            padding: 10px;
            color: white;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <div style="background-color:orange;">DIV1</div>
         <div style="background-color:blue;">DIV2</div>
         <div style="background-color:yellow;">DIV3</div>
      </div>

      <button onclick="setEqualFlex()">Equal Flex</button>
      <button onclick="setCustomFlex()">Custom Flex</button>
      <button onclick="resetFlex()">Reset</button>

      <script>
         function setEqualFlex() {
            var container = document.getElementById("box");
            var divs = container.getElementsByTagName("DIV");

            for (var i = 0; i < divs.length; i++) {
               divs[i].style.flex = "1";
            }
         }
         
         function setCustomFlex() {
            var container = document.getElementById("box");
            var divs = container.getElementsByTagName("DIV");

            // Set different flex values
            divs[0].style.flex = "1";  // Takes 1 part
            divs[1].style.flex = "2";  // Takes 2 parts  
            divs[2].style.flex = "3";  // Takes 3 parts
         }
         
         function resetFlex() {
            var container = document.getElementById("box");
            var divs = container.getElementsByTagName("DIV");

            for (var i = 0; i < divs.length; i++) {
               divs[i].style.flex = "";
            }
         }
      </script>
   </body>
</html>

How It Works

The flex property determines how flex items grow or shrink:

  • flex: "1" - All items take equal space
  • flex: "2" - Item takes twice as much space as flex: "1" items
  • flex: "0" - Item doesn't grow, keeps its natural size

Practical Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         .flex-container {
            display: flex;
            border: 2px solid #333;
            height: 100px;
            margin: 10px 0;
         }
         
         .flex-item {
            padding: 20px;
            margin: 5px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="flex-container" id="container">
         <div class="flex-item">Item 1</div>
         <div class="flex-item">Item 2</div>
         <div class="flex-item">Item 3</div>
      </div>
      
      <button onclick="applyFlexRatio()">Apply 1:2:1 Ratio</button>

      <script>
         function applyFlexRatio() {
            var items = document.querySelectorAll('.flex-item');
            
            items[0].style.flex = "1";  // 1 part
            items[1].style.flex = "2";  // 2 parts (larger)
            items[2].style.flex = "1";  // 1 part
         }
      </script>
   </body>
</html>

Key Points

  • The container must have display: flex for flex properties to work
  • Flex values are relative - flex: "2" is twice as large as flex: "1"
  • Use querySelector() or getElementsByTagName() to select multiple elements
  • Setting flex to an empty string removes the flex property

Conclusion

The flex property in JavaScript allows dynamic control over how flex items distribute space within their container. Use numeric values to create proportional layouts that adapt to different screen sizes.

Updated on: 2026-03-15T23:18:59+05:30

182 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements