- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 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>
Updated on 23-Jun-2020 12:21:44
- Related Questions & Answers
- 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 fill columns with JavaScript?
- How to display a Listbox with columns using Tkinter?
- How to set the order of the flexible item, relative to the rest with JavaScript?
- How to display HTML element with JavaScript?
- Set Flex Items into equal width columns with Bootstrap
- How to make a fullscreen window with JavaScript?
- How to display the items in a JComboBox in Java
Advertisements