CSS justify-content Property
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
Syntax
Using CSS
Using Javascript
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
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.