CSS
Distribute Items Evenly with CSS Flexbox
Learn to perfectly space multiple items within a container, distributing them evenly along the main axis with or without space at the ends, using Flexbox `justify-content`.
.button-group {
display: flex;
justify-content: space-between; /* Items distributed with space between them */
/* Alternatives:
justify-content: space-around; // Items with space around them
justify-content: space-evenly; // Items with equal space around them
justify-content: center; // Items clustered in the center
*/
width: 100%; /* Example: take full width */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.button {
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0; /* Prevent buttons from shrinking */
}
How it works: This snippet demonstrates how to evenly distribute a group of items (e.g., buttons, navigation links) within a container using CSS Flexbox. By setting `display: flex` on the parent and then using `justify-content` with values like `space-between`, `space-around`, or `space-evenly`, you can precisely control the spacing between child elements along the main axis. `space-between` creates full space between items, `space-around` adds space on both sides of items, and `space-evenly` ensures all gaps (including at the ends) are equal.