CSS | justify-content Property
The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser.
Note: This property cannot be used to describe items or containers along the vertical axis.
Syntax:
justify-content: flex-start|flex-end|center|space-between| space-around|space-evenly|initial|inherit;
Property Values:
- flex-start: It is used to align flex items from the start of the container.
Syntax:
justify-content: flex-start;
Example:
<!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><divid="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:
<!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><divid="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 align flex items at the center of container.
Syntax:
justify-content: center;
Example:
<!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><divid="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 last item is pushed to end.
Syntax:
justify-content: space-between;
Example:
<!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><divid="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 from each others, the corners.
Syntax:
justify-content: space-around;
Example:
<!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><divid="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 differ.
Syntax:
justify-content: space-evenly;
Example:
<!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><divid="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:
<!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><divid="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 its inherited parent element value.
Syntax:
justify-content: inherit;
Example:
<!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><divid="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
- Firefox 28.0, 18.0 -moz-
- Opera 17.0
- Safari 9.0, 6.1 -webkit-
