CSS justify-content Property

February 10, 2021 12:37 pm IST

You are Here:

CSS justify-content Property

CSS justify-content property specifies how the browser distributes space between and around flex items along the main-axis (horizontally) of a flex container, and the inline axis of a grid container.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+div{ display: flex; } h2+div > div{ width: 90px; height: 90px; border: 1px solid #8c8c8c; margin: 10px; } #parent{ justify-content: flex-start; } #parent1{ justify-content: flex-end; } </style> </head> <body> <h1>CSS justify-content Property</h1> <h2>justify-content: flex-start; (default)</h2> <div id="parent"> <div>Div 1</div> <div>Div 2</div> </div> <h2>justify-content: flex-end;</h2> <div id="parent1"> <div>Div 1</div> <div>Div 2</div> </div> </body> </html>

Run

Syntax

Using CSS

element{ justify-content: space-around; }

Using Javascript

object.style.justifyContent="space-around";

Animatable

No, justify-content property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS justify-content property is flex-start.

Property Value

The following table provides a list of values for CSS justify-content property.

Value	Explanation
flex-start	Items are placed at the beginning of the container.
flex-end	Items are placed at the end of the container.
center	Items are placed at the center of the container.
space-between	Items are placed in such a manner, where the space between each of the child elements is maximum.
space-around	Items are placed in such a manner, where the space around each of the child elements is equal.
space-evenly	Items are evenly spaced.

Using JavaScript

In the following example, we will demonstrate how to change the CSS justify-content property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display: flex; } #parent > div{ width: 90px; height: 90px; border: 1px solid #8c8c8c; margin: 10px; } </style> </head> <body> <h1>CSS justify-content Property</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent"); function myFunction(){ x.style.justifyContent = "space-around"; } </script> </body> </html>

Run