CSS
Flexbox: Equal Width, Wrapping Items
Create flexible lists or galleries where items wrap onto new lines while consistently taking up equal space using Flexbox's powerful `flex` shorthand.
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* Or space-between, center */
gap: 1rem; /* Space between items */
padding: 1rem;
border: 1px dashed #ccc;
}
.flex-item {
/* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
flex: 1 1 200px;
min-width: 200px; /* Ensures item is at least 200px wide before shrinking */
padding: 1.5rem;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
text-align: center;
box-sizing: border-box;
}
How it works: This code creates a highly flexible container where items automatically wrap to the next line and expand to fill available space, maintaining equal width. The `flex: 1 1 200px` shorthand is key: `flex-grow: 1` allows items to grow, `flex-shrink: 1` allows them to shrink, and `flex-basis: 200px` sets a preferred width. The `min-width: 200px` ensures items don't shrink below a usable size, providing a responsive and aesthetically pleasing layout for card grids or tag lists.