Flexbox is a CSS layout method for arranging child elements inside a parent container. Instead of relying on the browser’s usual vertical stacking, it lets items line up, distribute space, align, change size, and reorder when the available space changes. Think of the container as the organizer and its direct children as the things being arranged. section 12.1
Start with one small move: choose a block-level element and give it `display: flex`. Its child elements automatically become flex items. From there, decide whether they should run across the page or down it, where they sit on each axis, and whether they may wrap onto another line. section 12.2
A flex container has two directions to keep straight:
- The main axis follows the direction of the items. Use `flex-direction` to make it a row, reversed row, column, or reversed column. section 12.2
- The cross axis runs perpendicular to the main axis. Use `align-items` to place items along it, while `justify-content` arranges items along the main axis. section 12.2
- Use `flex-wrap` when items should move to new lines rather than remain squeezed into one line. section 13.9
A tidy navigation row
Turning a navigation list into a flex container makes its list items run horizontally from the start. It is a friendly first experiment because the HTML can stay simple: nav ul { display: flex; justify-content: flex-start; list-style-type: none; } section 12.14 section 12.15
Center something without gymnastics
Flexbox can place an element in the horizontal and vertical center of the browser window with a short set of CSS rules, avoiding older, more complicated centering tricks. It also works well for a header logo and title, navigation links, or two content columns. section 12.3 section 12.11
Flexbox is especially useful for page components and small-scale layouts. For a responsive flexible layout, let items wrap, use `flex-grow` for proportions, and set a basis and no shrinking when blocks need a minimum width. It can also keep a footer at the bottom of the screen by pairing a column container with a viewport-based minimum height. section 13.9 section 15.13
body {
display: flex; #1
flex-direction: column; #1
justify-content: flex-start; #1
align-items: center; #1
min-height: 100vh; #2
font-family: Optima, Calibri, sans-serif; #3
background-color: #221900; #3
color: #ecd078; #3
}
This page-level container stacks sections vertically, centers them across the page, and uses `min-height: 100vh` to help place the footer at the bottom. section 15.13
Flexbox works in current browsers and most recent ones without prefixes. If older-browser support is needed, use Autoprefixer to generate the older syntax rather than hand-writing it. Its flexibility can feel odd at first, so build a few small layouts and watch how space changes before tackling a larger design. section 12.7 section 12.1
