\n \n \n body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }\n h1 { color: #333; }\n h2 { color: #444; border-bottom: 1px solid #eee; padding-bottom: 5px; }\n .example { background: #f9f9f9; border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; }\n .note { background: #fff3cd; border: 1px solid #ffeeba; padding: 10px; margin: 10px 0; border-radius: 5px; }\n table { border-collapse: collapse; width: 100%; margin: 10px 0; }\n th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }\n th { background-color: #f2f2f2; }\n code { background-color: #f1f1f1; padding: 2px 4px; border-radius: 3px; font-family: monospace; }\n pre { background-color: #f1f1f1; padding: 10px; border-radius: 5px; overflow-x: auto; }\n \n\n

CSS justify-content Property

\n\n

Definition and Usage

\n

justify-content property is used to set the alignment of items within the container along the main axis in a flexbox layout.

\n\n

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

Property Values

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Value	Description
flex-start	Default. Items are placed at the beginning of the container.
flex-end	The item is located at the end of the container.
center	The item is centered in the container.
space-between	Items have equal space between them. The first item is at the start line, and the last item is at the end line.
space-around	The spacing on both sides of each item is equal. Note that the spacing between adjacent items is twice the spacing between the item and the edge.
space-evenly	The spacing between items (including between items and edges) is exactly equal.
initial	Set this property to its default value.
inherit	Inherits this property from its parent element.

\n\ndisplay: flex or display: inline-flextime).\n

.container {\n  display: flex;\n  justify-content: flex-start;\n}

.container {\n  display: flex;\n  justify-content: flex-end;\n}

.container {\n  display: flex;\n  justify-content: center;\n}

.container {\n  display: flex;\n  justify-content: space-between;\n}

.container {\n  display: flex;\n  justify-content: space-around;\n}

.container {\n  display: flex;\n  justify-content: space-evenly;\n}