CSS
Evenly Distribute Flex Items with Outer Spacing
Learn to evenly distribute items within a Flexbox container, ensuring not only space between them but also equal spacing at the beginning and end of the row using `justify-content: space-around`.
/* HTML Structure Example: */
/*
<div class="flex-container-around">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
</div>
*/
.flex-container-around {
display: flex;
justify-content: space-around; /* Distributes items with even space around them */
align-items: flex-start; /* Example: aligns items to the top */
border: 1px solid #ccc;
padding: 0.5em; /* Optional: adds a little inner padding */
background-color: #f0f0f0;
}
.flex-item {
padding: 1em 1.5em;
background-color: #6c757d;
color: white;
text-align: center;
margin: 0;
}
How it works: This snippet demonstrates how to achieve even distribution of flex items, including equal spacing at the beginning and end of the row, using `justify-content: space-around`. Unlike `space-between` which only puts space *between* items, `space-around` places an equal amount of space on both sides of each item, effectively creating consistent gaps not just internally but also from the container's edges.