v150 · CSS · demo

Skill Badges

A developer profile card where skill badges wrap across rows. With flex-wrap: wrap the last row is always ragged — one orphan is common. With flex-wrap: balance the browser balances the rows symmetrically. Resize the container to compare.

Drag the bottom-right corner of the card to resize · or use the width slider below

Alex Morgan
Senior Frontend Engineer
Core technologies
TypeScript React Vue.js Node.js GraphQL REST WebSockets
Platform & tooling
CSS / Sass Webpack Vite Docker CI / CD Playwright
flex-wrap: wrap — greedy fill
TypeScript React Vue.js Node.js GraphQL REST WebSockets

Ragged last row — one orphan

flex-wrap: balance — even rows
TypeScript React Vue.js Node.js GraphQL REST WebSockets

Balanced rows — visually symmetric

.skill-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: balance; /* ← instead of 'wrap' */
}

/* flex-wrap: wrap   — greedy, fills each row to capacity → orphan last row
   flex-wrap: balance — re-distributes items across equal-length rows
   Works identically to text-wrap: balance but for flex containers        */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗