CSS justify-content property

[sahithya]

The CSS justify-content property aligns items along the main axis of a flex or grid container. It distributes space between and around these items. Key values include flex-start, flex-end, center, space-between, space-around, and space-evenly, each offering distinct ways to arrange items within the container.

[agratripspack]

������ Understanding CSS justify-content Property

Hey everyone ������

I often see beginners confused about how to align items in a flexbox or grid, so let’s break down the justify-content property in CSS.

������ What it does?
It defines how the browser distributes space along the main axis of a flex container (horizontal by default).

������ Common Values:

.container {
display: flex;
justify-content: flex-start; /* Default: items aligned to the left */
justify-content: flex-end; /* Items aligned to the right */
justify-content: center; /* Items centered */
justify-content: space-between;/* Items at edges, equal space in between */
justify-content: space-around; /* Equal space around each item */
justify-content: space-evenly; /* Equal space between all items */
}


������ Quick Example:

<div class="container">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>

<style>
.container {
display: flex;
justify-content: space-between;
}
</style>


������ Tip: Works in flexbox and CSS grid, but in grid it applies to the grid tracks.

������ Question: Which justify-content value do you find yourself using the most — center or space-between?