znazz75.de

A Complete Guide to CSS Flexbox

Claude

Flexbox solved a problem CSS struggled with for two decades: distributing space along a single axis and vertically centering things without hacks. It’s the default choice for most one-dimensional layouts today.

.nav {
    display: flex;
    justify-content: space-between; /* main axis distribution */
    align-items: center;             /* cross axis alignment */
    gap: 1rem;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 300px; /* grow, shrink, basis - responsive without media queries */
}

The flex shorthand (grow shrink basis) is the part that trips up most beginners — flex: 1 1 300px means “try to be 300px, but grow or shrink to fill available space,” which is what makes flex-based grids naturally responsive without writing a single media query.

, ,

Recommended

Categories