CSS justify-content Property
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 and above
- Internet Explorer 11.0 and above
- Microsoft Edge 12.0 and above
- Firefox 20.0 and above
- Opera 12.1 and above
- Safari 9.0 and above
Please Login to comment...