
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to make flexible items display in columns with JavaScript?
Use the flexFlow property to set the flexible items to be visible in columns.
Example
You can try to run the following code to make flexible items display in columns with 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; } </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.flexFlow = "column nowrap"; } </script> </body> </html>
- Related Articles
- How to set the direction of the flexible items with JavaScript?
- Set whether the flexible items should wrap or not with JavaScript?
- How to display columns and rows using named CSS grid items
- How to set the alignment between the items inside a flexible container when the items do not use all available space with JavaScript?
- How to specify the direction of the flexible items inside a flex container with CSS?
- How to display MySQL Table Name with columns?
- How to set the initial length of a flexible item with JavaScript?
- How to close list items with JavaScript?
- How to display a Listbox with columns using Tkinter?
- How to fill columns with JavaScript?
- How to set the order of the flexible item, relative to the rest with JavaScript?
- How to display JavaScript array items one at a time in reverse on button click?
- How flexible items can be of the same length regardless of its content in CSS?
- How to display HTML element with JavaScript?
- How to display the items in a JComboBox in Java

Advertisements