How to Layout Three Fixed-Size Orange Circles with Equal Gaps on Mobile Using Only HTML & CSS

In the morning I decided to write this blog post, but by evening a flash of inspiration led me to split the familiar yet puzzling problem into two parts: first, pose the question and invite answers; second, provide my solution a week later.

Here is the challenge:

Requirements:

Three orange circles each 60 px in diameter, fixed size.

All gaps equal, i.e., the four spaces created by the three circles must be identical.

Designed for mobile; the yellow background spans the full screen width (the image size is illustrative, e.g., 320 px for iPhone 5, 375 px for iPhone 6, 414 px for iPhone 6s, etc.).

Compatible with Android 4.0 and above (note: Android 4.3‑ does not support the calc property).

Implemented with HTML & CSS only (no JavaScript).

Discussion can take place in the imweb group (179045421), w3cplus group (1041263), or sass group (78142855), or you may send your answer to my email at ['623059526', 'qq.com'].join('@').