1. The Holy Grail: Perfect Centering
Center Anything, Anywhere
The easiest way to center an element both horizontally and vertically within its parent.
Centered
.container {
display: flex;
justify-content: center; /* Horizontal */
align-items: center; /* Vertical */
height: 200px;
}
2. Navigation Bar Pattern
Space Between Alignment
Push the logo to the start and navigation links to the end automatically.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #1f2937;
}
3. Responsive Card Wrapping
Flexible Flow with Wrap
Items shrink to fit, but wrap to the next line when space runs out. Great for galleries.
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 150px; /* Grow, Shrink, Basis */
}
4. Visual Reordering
Change Order Without Changing HTML
Use the order property to visually rearrange items. Useful for mobile layouts.
1 (Last visually)
2 (First visually)
3 (Middle)
.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }