CSS
Evenly Distributing Flex Items with `justify-content: space-evenly`
Learn to use `justify-content: space-evenly` in Flexbox for balanced spacing, ensuring all items and the spaces between them and the container edges are equal.
.flex-container {
display: flex;
justify-content: space-evenly; /* Even spacing around and between items */
align-items: center; /* Vertically center items (optional) */
height: 150px; /* For demonstration */
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: 10px;
width: 100%;
font-family: sans-serif;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #6a9cff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
How it works: The `justify-content: space-evenly` property in Flexbox distributes items along the main axis such that the spacing between any two adjacent items, and the space before the first item and after the last item, is exactly the same. This provides a visually balanced layout and is often preferred over `space-around` or `space-between` when consistent margins around the entire group of items are desired. This snippet focuses on its behavior for single-line flex containers, ensuring predictable and aesthetic item distribution.