An inline flex stack utility built with pure HTML and CSS that aligns small UI elements in a horizontal flow while maintaining consistent spacing and alignment, making it ideal for compact interface utilities without relying on JavaScript.
Usage
This component is ideal for situations where multiple small elements need to live inline, such as icon-text pairs, tag lists, inline actions, metadata clusters, badges with controls, or compact tool sections that should not break line flow.
Implementation
The utility is implemented using CSS Flexbox with inline flex behavior, gap control, and alignment rules, allowing elements to sit naturally within text flow while remaining responsive and visually consistent.
HTML
<div class="flex-inline">
<span class="flex-inline__item">Edit</span>
<span class="flex-inline__item">Share</span>
<span class="flex-inline__item">Delete</span>
</div>CSS
.flex-inline {
width: 200px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.flex-inline__item {
padding: 0.25rem 0.5rem;
font-size: 12px;
border-radius: 6px;
background: #f3f4f6;
color: #111827;
}
@media (prefers-color-scheme: dark) {
.flex-inline__item {
background: #1f2937;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses inline flex for natural text flow
- Keeps small UI elements neatly grouped
- Prevents spacing inconsistencies
- Designed for compact utility patterns
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.