CSS
Flexible Item Distribution with Wrapping
Achieve even spacing and flexible wrapping for a list of items using CSS Flexbox. Ideal for tag clouds, button groups, or dynamic product lists.
.flex-container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to next line */
justify-content: space-around; /* Distribute space around items */
gap: 15px; /* Space between flex items */
padding: 20px;
border: 1px solid #ddd;
background-color: #fafafa;
border-radius: 8px;
}
.flex-item {
flex: 0 1 auto; /* Allow items to shrink but not grow initially */
padding: 10px 15px;
background-color: #e0f7fa;
border-radius: 20px;
text-align: center;
min-width: 80px; /* Example minimum width for small items */
font-family: sans-serif;
color: #00796b;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
How it works: This snippet demonstrates how to distribute items evenly within a container while allowing them to wrap onto multiple lines using Flexbox. `display: flex;` sets up the flex container. `flex-wrap: wrap;` enables items to move to the next line when space is insufficient. `justify-content: space-around;` evenly distributes space around each item along the main axis, and `gap` ensures consistent spacing between items. `flex: 0 1 auto;` on the items allows them to maintain their natural size but shrink if necessary, making it ideal for dynamic content blocks.