CSS Flexbox Mastery

Flexbox is a one-dimensional layout system designed for distributing space along a single axis — either horizontally or vertically

Container Properties:

.parent {
display: flex;
flex-direction: row | column;
flex-wrap: wrap | nowrap;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | baseline;
gap: 1rem;
}

Child Properties:

.child {
flex-grow: 1; /* Can it grow? 0 = no, 1 = yes */
flex-shrink: 0; /* Can it shrink? 1 = yes */
flex-basis: auto; /* Initial size */
flex: 0 1 auto; /* Shorthand: grow shrink basis */
align-self: center;
order: 1;
}

Common Patterns:

Holy Grail Layout:

.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.main {
display: flex;
flex: 1;
}

.sidebar {
flex: 0 0 250px;
}

.content {
flex: 1;
}

Card Grid:

.grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.card {
flex: 1 1 300px;
display: flex;
flex-direction: column;
}

.card-footer {
margin-top: auto;
}

Sticky Footer:

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

footer {
margin-top: auto;
}

Equal Height Columns:

.equal-height {
display: flex;
}

.column {
flex: 1;
}

Centering Everything:

.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

Flexbox is ideal for components and small-to-medium layouts. For two-dimensional layouts, reach for CSS Grid.