CSS justify-content property

The CSS justify-content property is used to control the alignment of elements. It’s primarily used in Flex layouts and controls the alignment of child elements along the main axis within a Flex container, including left, right, and center alignment.

justify-content Property Values

justify-content has the following values:

• flex-start: Element is aligned to the left
• flex-end: Element is aligned to the right
• center: Element is centered
• space-between: Element is evenly spaced, with the first and last elements aligned at both ends of the flex container, and all other elements sharing the space equally
• space-around: Element is evenly spaced, with half of the remaining space between the first and last elements and the flex container shared with other elements

justify-content Usage Example

Next, let’s take a look at the example code for the justify-content property:

<style>
.flex-container {
display: flex;
justify-content: center;
height: 300px;
align-items: center;
}

.flex-item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}

</style>

<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>

</div>

The above code will generate a flex container containing five child elements. In CSS, we use display: flex to set the container as a Flex container, and justify-content: center to center all child elements in the main axis direction of the container.

Next, we’ll replace the value of the justify-content property with flex-start, flex-end, space-between, and space-around to see the effects:

<style> 
.flex-container { 
display: flex; 
height: 300px; 
align-items: center; 
} 

.flex-item { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
margin: 10px; 
} 
</style> 

<!-- Align left --> 
<div class="flex-container" style="justify-content: flex-start;"> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
</div> 

<!-- Arrange on the right --> 
<div class="flex-container" style="justify-content: flex-end;"> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
</div> 

<!-- Arrange with equal spacing --> 
<div class="flex-container" style="justify-content: space-between;"> 
<div class="flex-item"></div> 
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

<!-- Equal spacing, with half the space left on both ends-->
<div class="flex-container" style="justify-content: space-around;">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

Code Implementation

We can use JavaScript to dynamically modify the value of the justify-content attribute to switch the arrangement of the container’s child elements:

<style> 
.flex-container { 
display: flex; 
height: 300px; 
align-items: center; 
} 

.flex-item { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
margin: 10px; 
} 
</style> 

<div class="flex-container" id="flexContainer"> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> 
</div> 

<button onclick="justifyLeft()">Align left</button> 
<button onclick="justifyCenter()">Center</button> 
<button onclick="justifyRight()">Align right</button> 
<button onclick="justifyBetween()">Equally spaced</button> 
<button onclick="justifyAround()">Align both ends</button> 

<script> 
const container = document.getElementById('flexContainer'); 

function justifyLeft() { 
container.style.justifyContent = 'flex-start'; 
} 

function justifyCenter() { 
container.style.justifyContent = 'center'; 
} 

function justifyRight() { 
container.style.justifyContent = 'flex-end'; 
} 

function justifyBetween() { 
container.style.justifyContent = 'space-between'; 
} 

function justifyAround() {
container.style.justifyContent = 'space-around';
}
</script>

Conclusion

The CSS justify-content property controls the alignment of child elements along the main axis of a Flex container. It can be set to left-align, right-align, center-align, evenly spaced, justified, and other settings, allowing for quick layout adjustments and transformations. In actual development, we can dynamically modify the justify-content property value with JavaScript to achieve more complex effects and layout solutions.