An elastic space flex stack built with pure HTML and CSS that vertically or horizontally stacks elements while allowing available space to expand or contract dynamically between items, creating flexible layouts without relying on JavaScript or fixed spacing.
Usage
This component is ideal for layouts where spacing should adapt to content or viewport changes, such as toolbars, control panels, UI sections with variable content length, or stacked layouts where equal spacing would feel rigid.
Implementation
The stack is implemented using CSS Flexbox with flexible gap control, auto margins, and alignment properties, enabling space to stretch or compress naturally while keeping item order and alignment intact.
HTML
<div class="flex-elastic">
<span>A</span>
<span>B</span>
<span>C</span>
</div>CSS
.flex-elastic {
width: 200px;
padding: 0.45rem;
border-radius: 16px;
background: #ECECEC;
display: flex;
gap: 0.25rem;
}
.flex-elastic span {
flex: 1;
padding: 0.35rem 0;
border-radius: 10px;
background: #1e293b;
color: #e5e7eb;
font-size: 11px;
text-align: center;
transition: background 140ms ease;
}
.flex-elastic span:hover {
background: #334155;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses flex based elastic spacing
- Adapts naturally to content size changes
- Avoids hard coded margin values
- Designed for fluid, responsive stacks
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.