CSS, HTML
Responsive Tag/Pill List with Flexbox
Implement a responsive list of tags or pills that automatically wrap to new lines, maintaining consistent spacing and alignment using CSS Flexbox for dynamic content display.
<div class="tag-container">
<span class="tag">JavaScript</span>
<span class="tag">CSS3</span>
<span class="tag">HTML5</span>
<span class="tag">Flexbox</span>
<span class="tag">Grid</span>
<span class="tag">Responsive Design</span>
<span class="tag">Web Development</span>
<span class="tag">Front-end</span>
<span class="tag">UI/UX</span>
</div>
.tag-container {
display: flex;
flex-wrap: wrap; /* Allow tags to wrap to the next line */
gap: 0.5rem; /* Space between tags (both row and column) */
padding: 1rem;
background-color: #f8f8f8;
border: 1px solid #eee;
border-radius: 8px;
max-width: 800px;
margin: 2rem auto;
}
.tag {
background-color: #007bff;
color: white;
padding: 0.5rem 0.8rem;
border-radius: 20px; /* Pill shape */
font-size: 0.85rem;
white-space: nowrap; /* Prevent tags from breaking internally */
cursor: pointer;
transition: background-color 0.2s ease;
}
.tag:hover {
background-color: #0056b3;
}
How it works: This snippet creates a responsive tag or pill list using CSS Flexbox. The `display: flex` and `flex-wrap: wrap` properties ensure that tags flow horizontally and wrap to the next line when space is limited. The `gap` property provides consistent spacing between individual tags, both horizontally and vertically, making the layout clean and adaptable without explicit margins.