CSS
Create a Responsive, Wrapping Tag Cloud with Flexbox
Build a flexible tag cloud or button group that wraps to multiple lines, with items evenly distributed across each line, using Flexbox and CSS `gap` property.
.tag-cloud {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
gap: 10px; /* Space between items and lines */
justify-content: flex-start; /* Align items to the start of each line */
max-width: 800px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.tag {
padding: 8px 15px;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #e0e0e0;
color: #333;
font-size: 0.9em;
white-space: nowrap; /* Prevent tags from breaking internally */
}
How it works: This snippet illustrates how to create a responsive, wrapping tag cloud or button group using Flexbox. By setting `display: flex` and `flex-wrap: wrap` on the container, items automatically flow to new lines as needed. The `gap` property provides consistent spacing between individual tags and between lines of tags. `justify-content: flex-start` aligns items to the beginning of each line, ensuring a clean and manageable layout for elements with varying widths.