Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the direction of the flexible items with JavaScript?
In this tutorial, we will learn how to set the direction of the flexible items with JavaScript.
The direction of the flexible items can be set using the flex-direction property of CSS. It defines how the flexible items will be placed in the flex container. Its default value is set to ‘row’, but it can have other values like ‘column’, ‘row-reverse’ etc.
To set the direction of the flexible items with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them −
Using the style.flexDirection Property
Using the style.setProperty Method
Using the style.flexDirection Property
The direction of the flexible items can be set using the style.flexDirection property of an element. The element object contains this property, so first, the document.getElementById() method is used to access the element object, and then we use the style.flexDirection property to set the direction of the flexible items with JavaScript.
Syntax
const element = document.getElementById('id')
element.style.flexDirection = row | column | row-reverse | column-reverse | inherit | initial
In the above syntax, we access the element object of an HTML element that has an id of ‘id’ using the document.getElementById() method and set the style.flexDirection property of it.
Parameters
row − The flexible items are placed horizontally as a row (Default value).
column − The flexible items are placed vertically as a column.
row-reverse − The flexible items are placed horizontally as a row in reverse order.
column-reverse − The flexible items are placed vertically as a column in reverse order.
inherit − The flex-direction property is inherited by its parent element’s property.
initial − The flex-direction property is set to default.
Example 1
In the below example, we use the flex-direction property to set the direction of the flexible items in JavaScript. You can try to run the following code to learn how to implement flexDirection property to set the direction of the flexible items −
<!DOCTYPE html> <html> <head> <style> #box { border: 1px solid #000000; width: 450px; height: 150px; display: flex; flex-direction: column; } #box div { flex-grow: 0; flex-shrink: 1; flex-basis: 20px; } </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;" id="myID">DIV3</div> </div> <p>Using flexDirection property</p> <button onclick="display()">Set</button> <script> function display() { document.getElementById("box").style.flexDirection = "row-reverse"; } </script> </body> </html>
Example 2
In the below example, we have used the style.flexDirection property to set the direction of the flexible items with JavaScript. We have used a button “Set Flex Direction” click event to execute the “setFlexDirection()” function that sets the flex-direction property of multiple elements.
<html> <head> <style> .flexible-item { display: flex; border: 1px solid black; padding: 10px; margin: 5px 0px; background-color: #f0f0f0; } .flex-item { padding: 10px; border: 1px solid black; background-color: aliceblue; margin: 5px; } </style> </head> <body> <h2> Set the direction of the flexible items using <i> style.flexDirection property </i> with JavaScript </h2> <button onclick="setFlexDirection()"> Set Flex Direction </button> <br /><br /> <div> <div> <b> style.flexDirection = 'row' </b> </div> <div id="element1" class="flexible-item"> <div class="flex-item"> 1 </div> <div class="flex-item"> 2 </div> <div class="flex-item"> 3 </div> </div> <div><b> style.flexDirection = 'column' </b></div> <div id="element2" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div><b> style.flexDirection = 'row-reverse' </b></div> <div id="element3" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div><b> style.flexDirection = 'column-reverse' </b></div> <div id="element4" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </div> <script> // 'Set Flex Direction' button click event handler function function setFlexDirection() { const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') const element3 = document.getElementById('element3') const element4 = document.getElementById('element4') // Set the flex-direction property using the style.flexDirection property element1.style.flexDirection = 'row' element2.style.flexDirection = 'column' element3.style.flexDirection = 'row-reverse' element4.style.flexDirection = 'column-reverse' } </script> </body> </html>
Using the style.setProperty Method
Any new or existing property of an element can be set in JavaScript using the style.setProperty method. To set the direction of the flex items using the style.setProperty method, we need the element object using the document.getElementById() method and then we can easily set the flex-direction property. In the property name parameter of style.setProperty method, it should be ‘flex-direction’, and the value and priority will be as per the user.
Syntax
const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)
In the above syntax, we access the element object of an HTML element that has an id of ‘id’ using the document.getElementById() method and then use the style.setProperty method.
Parameters
property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (Optional).
Example
In the below example, we have used the style.setProperty method to set the direction of the flexible items with JavaScript. We have used an input field to take the user’s input for the direction of the flexible items. A button “Set Flex Direction” is associated with a click event that executes the “setFlexDirection()” function, which sets the direction of the flexible items.
<html> <head> <style> .flexible-item { display: flex; border: 1px solid black; padding: 10px; margin: 5px 0px; background-color: #f0f0f0; } .flex-item { padding: 10px; border: 1px solid black; background-color: aliceblue; margin: 5px; } </style> </head> <body> <h2> Set the direction of the flexible items using <i> style.setProperty method </i> with JavaScript </h2> <h4>Enter the direction (row, column, row-reverse, column-reverse)of the flexible items:</h4> <input id="flex-direction" type="text" name="flex-direction" value="column"> <button onclick="setFlexDirection()"> Set Flex Direction </button> <br /><br /> <div id="root" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <script> // 'Set Flex Direction' button click event handler function function setFlexDirection() { const root = document.getElementById('root') // input field's value const flex_direction = document.getElementById('flex-direction').value // Set the flex-direction property using the style.setProperty method root.style.setProperty('flex-direction', flex_direction) } </script> </body> </html>
In this tutorial, we discussed two approaches to set the direction of flexible items with JavaScript. The first approach is to use the style.flexDirection property and the other is to use the style.setProperty method.
598 Views
