An adaptive align flex row built with pure HTML and CSS that arranges items horizontally and adjusts their alignment gracefully as available space changes, ensuring content stays visually balanced without relying on JavaScript or fixed breakpoints.
Usage
This component is ideal for interfaces where horizontal alignment must remain flexible, such as navigation bars, action rows, header utilities, filter controls, or UI toolbars that need to adapt smoothly across different screen widths.
Implementation
The row is implemented using CSS Flexbox alignment properties, wrapping behavior, and responsive spacing, allowing items to shift alignment or wrap naturally while maintaining clear visual structure.
HTML
<div class="flex-adapt">
<span>Label</span>
<button>Action</button>
</div>CSS
.flex-adapt {
width: 200px;
padding: 0.5rem 0.6rem;
border-radius: 14px;
background: #ECECEC;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.4rem;
}
.flex-adapt span {
font-size: 12px;
color: #9ca3af;
}
.flex-adapt button {
padding: 0.3rem 0.55rem;
border-radius: 999px;
border: none;
background: #6366f1;
color: #ffffff;
font-size: 11px;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Adapts alignment based on available width
- Supports wrapping without breaking layout
- Keeps spacing consistent and readable
- Designed for responsive horizontal UI rows
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.