Flexbox solves 90% of everyday layout: navbars, card rows, centering. Here is the whole model in one page.
Container properties
.container {
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between | space-evenly; /* MAIN axis */
align-items: stretch | center | flex-start | flex-end; /* CROSS axis */
flex-wrap: wrap;
gap: 16px;
}Item properties
.item {
flex: 1; /* share space equally */
flex: 0 0 250px; /* don't grow, don't shrink, stay 250px */
align-self: center; /* override for one item */
order: -1; /* move first visually */
}The memory trick
justify = main axis (direction of flex-direction). align = cross axis (perpendicular). Row direction → justify is horizontal, align is vertical.
Perfect centering
.parent { display: flex; justify-content: center; align-items: center; }Practice interactively in the Playground, or go deeper in the Flexbox lesson.