CSS
Distributing Space Evenly Among Flex Items
Learn to evenly distribute available space among flex items within a container using `justify-content` properties like `space-between`, `space-around`, or `space-evenly` for balanced layouts.
.distribute-container {
display: flex;
width: 100%;
background-color: #f8f8f8;
padding: 10px;
border: 1px solid #ccc;
min-height: 80px;
align-items: center; /* Vertically centers items within the container */
justify-content: space-between; /* Evenly distributes space between items */
/* Alternative: justify-content: space-around; (space before, between, after items) */
/* Alternative: justify-content: space-evenly; (equal space before, between, and after items) */
}
.distribute-item {
background-color: #6a5acd;
color: white;
padding: 10px 15px;
margin: 5px; /* Margin to show distinct separation, independent of gap */
border-radius: 5px;
}
How it works: This snippet showcases how to distribute horizontal space among items within a Flexbox container. By setting `justify-content: space-between`, the first item aligns to the start, the last item to the end, and all remaining space is distributed equally *between* the items. Alternatives include `space-around` (which places equal space on both sides of each item, resulting in double space between items) and `space-evenly` (which distributes space equally before, between, and after all items), offering versatile alignment patterns for navigation menus, button groups, or responsive layouts.