Let's read a two-box flex row rule by rule and see exactly what each line contributes.
.row { display: flex; justify-content: space-between; gap: 12px; }. display: flex is the switch that turns this div into a flex container the moment this is added, its two direct children (the two .box divs) automatically line up side by side in a row, without any extra code. justify-content: space-between then pushes those two boxes to opposite ends of the row one hugs the left edge, the other hugs the right edge, with all the leftover space distributed as a gap between them. gap: 12px adds a fixed 12-pixel spacing as a baseline, which matters especially if you had three or more boxes instead of two, keeping consistent breathing room between every pair.
On the HTML side, <div class="row"><div class="box">1</div><div class="box">2</div></div> notice .row is the PARENT with display: flex, while .box is just a plain styled box with no flex properties of its own. The boxes don't need to know anything about flex layout; they simply become flex items automatically because of their parent.
If you added a third <div class="box">3</div> inside .row right now, it would automatically join the same row, spaced correctly, with zero extra CSS needed.