
- 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 set the alignment between the items inside a flexible container when the items do not use all available space with JavaScript?
Use the alignContent property in JavaScript to set the alignment between the items inside a flexible container.
Example
You can try to run the following code to implement alignContent property in JavaScript −
<!DOCTYPE html> <html> <head> <style> #box { border: 1px solid #000000; width: 240px; height: 150px; flex-flow: row wrap; align-content: space-around; display: flex; } #box div { height: 80px; width: 80px; } </style> </head> <body> <div id = "box"> <div style = "background-color:orange;" ID = "myID1">DIV1</div> <div style = "background-color:blue;" id = "myID2">DIV2</div> <div style = "background-color:yellow;" id = "myID3">DIV3</div> </div> <button onclick="display()"> Set </button> <script> function display() { document.getElementById("box").style.alignContent = "space-between"; } </script> </body> </html>
- Related Questions & Answers
- Horizontally align the flex items when the items do not use all available space on the main-axis with CSS
- How to specify the direction of the flexible items inside a flex container with CSS?
- Set whether the flexible items should wrap or not with JavaScript?
- How to set the direction of the flexible items with JavaScript?
- Specify the order of a flexible item relative to the rest of the flex items inside the same container with CSS
- Display the flex items with space between the lines in CSS
- How to make flexible items display in columns with JavaScript?
- Align flex items at the beginning of the container with CSS
- Align flex items at the end of the container with CSS
- Align flex items at the center of the container with CSS
- Set the flex items vertically with CSS
- Set the flex items horizontally with CSS
- Set the name to Grid Items with CSS
- How to set the space between characters in a text with JavaScript?
- How to set the space between cells in a table with JavaScript?
Advertisements