CSS
CSS Flexbox: Create a Responsive Tag List with Space-Between and Wrapping
Design a flexible tag or chip list that wraps onto multiple lines while distributing items evenly with 'justify-content: space-between' using Flexbox for clean layouts.
.tag-list {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to next line */
justify-content: space-between; /* Distribute items with space between */
gap: 10px; /* Space between wrapped lines */
padding: 15px;
border: 1px solid #eee;
max-width: 600px;
}
.tag-item {
background-color: #007bff;
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9em;
flex-grow: 0; /* Prevent items from growing */
flex-shrink: 0; /* Prevent items from shrinking */
}
How it works: This Flexbox snippet creates a responsive tag list. 'display: flex' and 'flex-wrap: wrap' enable tags to flow onto new lines as space diminishes. 'justify-content: space-between' evenly distributes items on each line, placing the first item at the start and the last at the end, with equal space between others. The 'gap' property provides consistent spacing both horizontally and vertically between the tags.