CSS
Distribute Items with Even Spacing Using Flexbox `space-evenly`
Achieve perfectly even distribution of space between and around multiple Flexbox items, including equal spacing at the start and end of the container, for cleaner content arrangement.
.flex-container {
display: flex;
justify-content: space-evenly; /* Distributes space evenly around items */
align-items: center; /* Vertically centers items if they have different heights */
gap: 10px; /* Adds additional space between items, useful as fallback */
border: 2px solid #28a745;
padding: 10px;
width: 100%;
min-height: 120px;
}
.flex-item {
background-color: #6c757d;
color: white;
padding: 15px 25px;
text-align: center;
border-radius: 5px;
}
How it works: This snippet illustrates how to use `justify-content: space-evenly;` to distribute child elements within a Flexbox container. Unlike `space-between` (which only adds space between items) or `space-around` (which adds half as much space at the ends), `space-evenly` ensures that all gaps between items, and the gaps between the items and the container's edges, are precisely equal. `align-items: center;` is added to ensure vertical alignment if items have varying heights, and `gap` provides a consistent minimum spacing between items regardless of `justify-content`.