CSS
Distribute Items Evenly with Space Between and Gap in Flexbox
Effectively distribute multiple items along the main axis of a Flexbox container, creating consistent space between them and uniform internal gaps.
.flex-container-distribute {
display: flex;
justify-content: space-between; /* Pushes first and last items to edges, spaces others evenly */
align-items: center; /* Aligns items vertically in the cross-axis */
flex-wrap: wrap; /* Allows items to wrap to the next line */
gap: 20px; /* Provides consistent spacing between flex items */
padding: 20px;
border: 2px solid #007bff;
min-height: 150px;
}
.flex-item-distribute {
background-color: #e6f7ff;
padding: 15px 25px;
border-radius: 5px;
flex-grow: 0; /* Prevents items from growing unless specified */
flex-shrink: 0; /* Prevents items from shrinking unless specified */
flex-basis: 120px; /* Suggests an initial size for the item */
text-align: center;
}
/* Example HTML structure for context
<div class="flex-container-distribute">
<div class="flex-item-distribute">Item 1</div>
<div class="flex-item-distribute">Item 2</div>
<div class="flex-item-distribute">Item 3</div>
<div class="flex-item-distribute">Item 4</div>
<div class="flex-item-distribute">Item 5</div>
</div>
*/
How it works: This snippet demonstrates how to achieve sophisticated item distribution within a Flexbox container. `justify-content: space-between` places the first item at the start and the last item at the end of the container, distributing the remaining space evenly between the items. `gap` ensures consistent spacing between all flex items, while `flex-wrap: wrap` allows items to move to a new line if the container is too narrow, maintaining responsiveness.