CSS
Distribute Items Evenly with Flexbox `space-evenly`
Learn to use CSS Flexbox `justify-content: space-evenly` to perfectly distribute items, ensuring equal space between and around each element in a row or column.
.container {
display: flex;
justify-content: space-evenly;
align-items: center; /* Optional: for vertical alignment */
width: 100%;
height: 100px; /* For demonstration */
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.item {
padding: 10px 15px;
background-color: #007bff;
color: white;
border-radius: 5px;
font-family: sans-serif;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
How it works: This snippet demonstrates `justify-content: space-evenly` in Flexbox, a powerful property for distributing items along the main axis. Unlike `space-between` (no space at ends) or `space-around` (half space at ends), `space-evenly` ensures that all items, including the first and last, have exactly the same amount of space between them and the container's edges. This creates a visually balanced and uniform layout, ideal for navigation bars or icon groups.