CSS justify-content Property - GeeksforGeeks

14 Feb, 2022
The justify-content property in CSS is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container which is distributed in a browser.
Note: This property cannot be used to describe items or containers along the vertical axis. For aligning the items vertically, we can use the align-items property
The alignment is possible after applying the lengths and auto margins properties, ie., if there is at least one flexible element, with flex-grow property, other than 0, in a Flexbox layout then it will not impact & has any effect as there won’t be any available space.
Syntax:
justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;
Property Values:
flex-start: It is the default value that is used to align flex items from the start of the container.
Syntax:
justify-content: flex-start;
Example: This example illustrates the justify-content property where property value is set to flex-start to align the item from the start of the container.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: flex-start;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
flex-end: It is used to align flex items at the end of the container.
Syntax:
justify-content: flex-end;
Example: This example illustrates the justify-content property where property value is set to flex-end.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: flex-end;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output: 
center: It aligns flex items at the center of the container.
Syntax:
justify-content: center;
Example: This example illustrates the justify-content property where property value is set to center.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: center;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
space-between: The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.
Syntax:
justify-content: space-between;
Example: This example illustrates the justify-content property where property value is set to space-between.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: space-between;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
space-around: The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.
Syntax:
justify-content: space-around;
Example: This example illustrates the justify-content property where property value is set to space-around.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: space-around;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksForGeeks</p>          </div>        <div>2              <p>GeeksForGeeks</p>          </div>        <div>3              <p>GeeksForGeeks</p>          </div>        <div>4              <p>GeeksForGeeks</p>          </div>    </div></body> </html>
Output:
space-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.
Syntax:
justify-content: space-evenly;
Example: This example illustrates the justify-content property where property value is set to space-evenly.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: space-evenly;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
initial: The items are placed according to the default value.
Syntax:
justify-content: initial;
Example: This example illustrates the justify-content property where property value is set to initial.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: initial;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
inherit: The items are placed according to their inherited parent element value.
Syntax:
justify-content: inherit;
Example: This example illustrates the justify-content property where property value is set to inherit.
HTML
<!DOCTYPE html><html> <head>    <title> CSS justify-content Property </title>    <style>    #box {        display: flex;        border: 1px solid black;        justify-content: inherit;    }         #box div {        width: 110px;        height: 120px;        border: 1px solid black;        background: linear-gradient(green, silver);    }    </style></head> <body>    <div id="box">        <div>1              <p>GeeksforGeeks</p>          </div>        <div>2              <p>GeeksforGeeks</p>          </div>        <div>3              <p>GeeksforGeeks</p>          </div>        <div>4              <p>GeeksforGeeks</p>          </div>    </div></body> </html>
Output:
Supported Browsers: The browser supported by CSS justify-content property are listed below:
Google Chrome 29.0, 21.0 -webkit-
Internet Explorer 11.0
Microsoft Edge 12.0
Firefox 28.0, 18.0 -moz-
Opera 17.0
Safari 9.0, 6.1 -webkit-
hritikbhatnagar2182
bhaskargeeksforgeeks
varshagumber28
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?