Flexbox arranges child elements along one axis: horizontally or vertically. Put `display: flex` on their parent, then choose how the children align and how space is distributed. It is a practical choice for centering a card or lining up items in a row. CSS Grid is another layout option when a page needs regions arranged in both rows and columns. section 6.4 section 2.1
Center a profile card
To center a card in the browser window, make its parent, `body`, a flex container: `body { display: flex; justify-content: center; align-items: center; }`. The first alignment declaration centers the card horizontally; the second centers it vertically. Apply these declarations to the parent, not the card. section 6.4
Once a container uses Flexbox, a few properties handle common layout jobs:
- `flex-direction` chooses the axis. `justify-content` distributes items and leftover space along it; `align-items` controls their alignment relative to one another and the container. section 6.9
- `gap` sets space between items without adding space at the container’s outer edges. For profile statistics, `justify-content: space-around` spreads three groups across a row while `gap: 12px` preserves a minimum separation. section 6.7.2
- `flex-basis` supplies a starting size; `flex-grow` lets an item use leftover space. `flex-shrink` controls whether and how an item can shrink. section 8.5 section 6.9
Even spacing does not guarantee that the middle item sits at the container’s exact center: items with different widths affect where leftover space falls. Browser-default margins can also make aligned content look offset. Check both before adjusting the layout. section 6.7.2
Move checkout sections side by side
For a wider checkout screen, a media query changes the cart-and-summary container to `display: flex` and adds a `20px` gap. The summary gets `flex-basis: 250px`; the cart gets `flex-grow: 1` so it can take the remaining room. A maximum width on the page prevents the layout from stretching too far on very wide screens. section 8.5
Listing 8.29 Placing the two cards side by side on wide screens
@media (min-width: 955px) {
.section-container {
display: flex;
gap: 20px;
}
section.my-cart { flex-grow: 1; }
section.summary { flex-basis: 250px }
}
See the media query and flex sizing declarations together in the checkout layout. section 8.5
Use Flexbox for smaller alignments, too: place a mobile cart footer’s label and total at opposite ends of one line, align form labels with controls, or center an icon inside a share link. It need not replace simpler CSS—right-aligned text alone does not require a flex container. section 8.3.1 section 9.2.3 section 10.5 section 11.5.3
