Flexbox is short for the CSS Flexible Box Layout Module. It turns a parent into a flex container and its children into flex items, giving you direct control over how those items are laid out, aligned, sized, distributed, and ordered. Instead of relying on the browser’s usual vertical stack of blocks, Flexbox lets a group of items grow when space is available or shrink when space gets tight. section 12.1
Think one direction at a time: Flexbox is for arranging items in a row or a column. It is especially handy for page components such as headers, navigation bars, sidebars, and small layouts. For a large overall layout that needs rows and columns working together, use CSS Grid and bring in Flexbox for the one-dimensional parts. section 11.2 section 12.1
A flex layout starts with a container, then answers a few practical questions:
- Which direction should items travel? A horizontal main axis places them side by side; flex-direction: column stacks them vertically. section 12.6
- How should items line up? justify-content positions them on the main axis, while align-items positions them on the cross axis. section 12.3
- Should items share extra space or protect their size? flex-grow expands an item, and flex-shrink controls shrinking. section 12.1 section 12.6
- Should a crowded collection make another line? flex-wrap lets gallery items wrap inside their container. section 15.6
PLAY: dead-center a heading
To center an h1 in the browser window, make its div a flex container. Center along both axes, then give the div a viewport-height minimum. Four small declarations replace a pile of older positioning tricks. div { display: flex; justify-content: center; align-items: center; height: 100vh; } section 12.3
Flexbox can also build a page from smaller, cooperative pieces: use a vertical body container for stacked sections, horizontal containers for a logo and title or navigation links, and a horizontal main container for article and sidebar columns. Nesting these containers can imitate a two-dimensional layout, but that trick is best kept light-duty. section 12.6
main {
display: flex; #1
justify-content: center; #1
flex-wrap: wrap; #1
max-width: 960px; #2
font-family: Optima, Calibri, sans-serif;
}
This gallery container centers thumbnail links and lets them wrap into additional lines within a maximum width. section 15.6
REMEMBER: Flexbox is powerful precisely because it adapts to changing content and screen size, so its results can seem odd before its rules click. Use it often for a single row or column; let Grid handle the big page blueprint. section 12.1 section 11.2
