Detailed explanation
Flexbox is a CSS layout system for arranging items in one dimension at a time: along a row or a column. Setting display: flex on an element makes it a flex container, and its direct children become flex items. The key to understanding alignment is to identify two axes before choosing properties: the main axis, along which items are laid out, and the cross axis, which runs perpendicular to it. This matters because Flexbox alignment follows these axes, not fixed horizontal and vertical directions.
The flex-direction property defines the main axis. In the usual horizontal writing mode, row places the main axis horizontally, while column places it vertically. With row, the cross axis is vertical; with column, it is horizontal. The row-reverse and column-reverse values reverse the main-axis direction without changing the HTML source order. More precisely, row follows the document’s inline axis and column follows its block axis, so writing-mode and direction can affect the physical directions. In interviews, explain the common horizontal-writing case first, then mention this qualification if needed.
The justify-content property distributes available space along the main axis. For example, space-between places the first and last items at opposite ends and distributes remaining space between adjacent items. The align-items property sets the default cross-axis alignment of items within each flex line; center centres them, while stretch can expand eligible items with an automatic cross size. An individual item can override this default using align-self. Flex sizing happens before this alignment: if flex-grow consumes all available main-axis space, justify-content may have no remaining space to distribute.
For the given example—display: flex; flex-direction: row; justify-content: space-between; align-items: center—the children spread across the container horizontally and are centred vertically within their flex line, assuming the usual writing mode. Changing only flex-direction to column makes space-between distribute vertical space and center align items horizontally. Finally, align-content positions flex lines within available cross-axis space in a wrapping container; it does not align individual items and has no effect on a single-line container using flex-wrap: nowrap. Interviewers often check this distinction and whether you can correctly swap axes when flex-direction changes.
Key points to remember
- Flexbox arranges direct children along one main axis at a time.
- flex-direction defines the main axis; the cross axis is perpendicular.
- justify-content distributes available main-axis space after flex sizing.
- align-items aligns items within each line; align-self overrides it for one item.
- align-content distributes flex lines along the cross axis in a wrapping container.
Common mistakes candidates make
- Assuming justify-content always means horizontal alignment and align-items always means vertical alignment.
- Using align-content to align individual items or expecting it to work with flex-wrap: nowrap.
- Expecting visible centring or spacing when there is no extra space along the relevant axis.
Likely follow-up questions
How do you centre an item horizontally and vertically with Flexbox?
Set display: flex; justify-content: center; align-items: center on its parent. Ensure the parent has available space, such as a suitable min-height, so vertical centring is visible.
What is the difference between align-items and align-content?
align-items controls how individual items align within each flex line. align-content controls the placement and spacing of flex lines in a wrapping container when cross-axis space is available; it has no effect with flex-wrap: nowrap.
Does flex-wrap make Flexbox a two-dimensional layout system?
No: wrapping creates additional flex lines, but each line distributes its items independently. Use CSS Grid when you need coordinated alignment across both rows and columns.
Interview tip: Identify the axes for row, explain the example, then switch to column to demonstrate that alignment follows the axes.