What do “flex” and “justify-content” achieve that “text-align” doesn't?

Question

These two ways to move a button to the right of its parent seem completely equivalent to me. Is there a reason to choose one over the other? Are there circumstances in which

Answer 1

Yes, the reason is vertical centering. The align-items: center is the key here, which allows the buttons to be vertically centered in the modal footer. This is hard to do without flex-boxes - you would need to resort to "hacks" like using position:absolute, or adding some precalculated amounts of padding on both sides, etc. Flexes (and Grids) allow developers to define layouts more succinctly.

To answer your question - they didn't opt for justify-content:flex-end instead of text-align:right - instead, they opted for flex instead of block as the display box model (for vertical centering), and the justify-content usage comes naturally from that decision.