
- 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 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 Articles
- 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?
- How to set the direction of the flexible items with JavaScript?
- Set whether the flexible items should wrap or not with JavaScript?
- Specify the order of a flexible item relative to the rest of the flex items inside the same container with CSS
- How to make flexible items display in columns with JavaScript?
- How to set vertical space between the list of items using CSS?
- Display the flex items with space between the lines in CSS
- How to set the space between characters in a text with JavaScript?
- Set the name to Grid Items with CSS
- How to set the initial length of a flexible item 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
- How to set the horizontal alignment of text with JavaScript?

Advertisements