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

How to make flexible items display in columns with JavaScript?

Javascript Object Oriented Programming Front End Technology

The flexFlow property in CSS controls how flexible items are arranged within a flex container. To display items in columns using JavaScript, you can modify this property dynamically.

Understanding flexFlow

The flexFlow property is a shorthand that combines flex-direction and flex-wrap. For column layout, use column for direction and nowrap or wrap for wrapping behavior.

Example

Here's how to change flexible items from row to column layout using JavaScript:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 100px;
            height: 150px;
            display: flex;
            flex-flow: row wrap;
         }
         #box div {
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
         }
      </style>
   </head>
   
   <body>
      <div id="box">
         <div style="background-color:orange;">DIV1</div>
         <div style="background-color:blue; color:white;">DIV2</div>
         <div style="background-color:yellow;" id="myID">DIV3</div>
      </div>
      <p>Click the button to arrange items in columns</p>
      <button onclick="display()">Set Column Layout</button>
      <button onclick="reset()">Reset to Row Layout</button>
      
      <script>
         function display() {
            document.getElementById("box").style.flexFlow = "column nowrap";
         }
         
         function reset() {
            document.getElementById("box").style.flexFlow = "row wrap";
         }
      </script>
   </body>
</html>

Different Column Options

You can use various flexFlow values for different column behaviors:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .flex-container {
            border: 2px solid #333;
            width: 120px;
            height: 200px;
            display: flex;
            margin: 10px;
            flex-flow: row wrap;
         }
         .flex-item {
            height: 30px;
            width: 30px;
            margin: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
         }
      </style>
   </head>
   
   <body>
      <div class="flex-container" id="container1">
         <div class="flex-item" style="background-color:red; color:white;">1</div>
         <div class="flex-item" style="background-color:green; color:white;">2</div>
         <div class="flex-item" style="background-color:blue; color:white;">3</div>
         <div class="flex-item" style="background-color:purple; color:white;">4</div>
      </div>
      
      <button onclick="setColumn()">Column NoWrap</button>
      <button onclick="setColumnWrap()">Column Wrap</button>
      <button onclick="setColumnReverse()">Column Reverse</button>
      <button onclick="resetLayout()">Reset</button>
      
      <script>
         function setColumn() {
            document.getElementById("container1").style.flexFlow = "column nowrap";
         }
         
         function setColumnWrap() {
            document.getElementById("container1").style.flexFlow = "column wrap";
         }
         
         function setColumnReverse() {
            document.getElementById("container1").style.flexFlow = "column-reverse nowrap";
         }
         
         function resetLayout() {
            document.getElementById("container1").style.flexFlow = "row wrap";
         }
      </script>
   </body>
</html>

Key flexFlow Values for Columns

flexFlow Value Direction Wrapping Description
column nowrap Top to bottom No wrap Single column, items may overflow
column wrap Top to bottom Wrap to new column Multiple columns when needed
column-reverse nowrap Bottom to top No wrap Single column, reversed order

Conclusion

Use JavaScript to modify the flexFlow property for dynamic column layouts. The column value arranges items vertically, while wrap controls overflow behavior.

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

252 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements