53. Flex Container Property: justify-content (Main Axis)
justify-content controls how space is distributed between and around flex items along the main axis.
| Value | Description |
|---|---|
flex-start (default) | Items are packed toward the start of the flex direction. |
flex-end | Items are packed toward the end of the flex direction. |
center | Items are centered along the main axis. |
space-between | Items are evenly distributed; the first item is flush with the start, the last item is flush with the end. |
space-around | Items are evenly distributed with equal space around them (leading to half-sized space at the ends). |
space-evenly | Items and the spacing between them are distributed so that the space before the first item, between items, and after the last item is exactly the same. |
Example: Horizontal Centering
css .container { display: flex; width: 500px; border: 1px solid red; }
/* Centers items horizontally (if flex-direction: row) */ .centered-row { justify-content: center; }
/* Pushes items to the edges with equal spacing between them */ .spaced-out { justify-content: space-between; }
Common Use: Centering navigation links or spacing elements equally in a footer.