Turning flex on
The HTML puts three boxes, a, b and c, inside a div with the class row. Without flexbox they follow normal flow: each div is a block box, so it starts on a new line and they stack top to bottom.
display: flex makes .row a flex container, and its three children become flex items. Flex items line up side by side in a row, packed at the start. Each one keeps its own width and height.
Flexbox thinks in two directions. The main axis runs the way the items are laid out: here left to right, because flex-direction is row by default. The cross axis runs across it, top to bottom.
Placing the items
gap puts 16px of space between neighbouring items, never at the outer edges. a stays at the left; b moves to 116px and c to 272px. The rest of the row, 228px, is free space.
justify-content shares the free space along the main axis. space-between puts the first item at the start and the last at the end, and splits the 228px equally between them: each gap grows from 16px to 130px.
align-items places the items along the cross axis. center lines up the middle of each item with the middle of the 160px-tall row: a moves down 60px, b 45px and c 65px.
Sharing space
flex-grow says how much of the free space an item takes. b is the only item with a flex-grow above 0, so it takes all 228px and grows from 140px to 368px. Nothing is left for space-between to share.
Now make the row 300px wide, as on a phone. The items and gaps need 372px: 72px too many. Every flex item may shrink by default, in proportion to its width: a and c become about 79px, b about 110px.
flex-wrap: wrap lets items move onto a new line instead of shrinking. c no longer fits beside a and b, so it wraps to a second line. b grows to fill line one, and each line centres its own items.
What happens
;; step 1/9 · normal-flow .row 600px × 160px, display: block .a 100px × 40px y 0 .b 140px × 70px y 40 .c 100px × 30px y 110 normal flow: one box under the next
The card leaves out the boxes' sizes. The full style.css also has .a { width: 100px; height: 40px; } .b { width: 140px; height: 70px; } .c { width: 100px; height: 30px; } Before align-items is set, its default (normal, which acts as stretch) makes items as tall as the row only when their height is auto. These boxes have a set height, so they stay at the top.