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
HTML DOM Style justifyContent Property
The HTML DOM justifyContent property is used for aligning flex items horizontally on the main axis when it doesn’t take all the available space.
Following is the syntax for −
Setting the justifyContent property −
object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| flex-start | Thispositions the items at the container beginning and is the defaultvalue. |
| flex-end | Thispositions the items at the container end. |
| center | Thispositions the items at container center. |
| space-between | Thispositions the items with space between the lines. |
| space-around | Thispositions the items with space between, before and after thelines. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the justifyContent property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) {
border-color: black;
}
#demo div:nth-child(odd) {
border-color: red;
}
</style>
<script>
function changeJustifyContent() {
document.getElementById("demo").style.justifyContent="space-between";
document.getElementById("Sample").innerHTML="The justify-content property is now set to space between";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>Change the above container justify-content property by clicking the below button</p>
<button onclick="changeJustifyContent()">Change Justify Content</button>
<p id="Sample"></p>
</body>Output
On clicking the “Change Justify Content” button −
Updated on: 24-Oct-2019
19 Views
Advertisements