Inspect the working example
Source and Result each occupy 60px in a 300px flex bar. The trailing item uses margin-inline-start:auto, absorbing the remaining 180px before it.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| First item | Measure start offset | 0px |
| Trailing item | 300−60 | Start offset 240px |
| Free margin | 300−60−60 | 180px before the trailing item |
Follow the browser mechanism
Auto margins absorb positive free space before main-axis alignment. The logical inline-start side maps through direction; the default fixture is LTR. Mirroring direction in a private test does not imply that Chinese content should use RTL.
Centering the pair is a different task
The alternative centers both items together instead of reserving free space before the trailing one.
<style>body{margin:8px}</style>
<style>.bar{display:flex;width:300px;justify-content:center}.bar p{margin:0;width:60px}</style><section class="bar"><p>Source</p><p>Result</p></section>The two starts are 90px and 150px, rather than 0px and 240px.
Try the repair
If each item becomes 80px but the bar stays 300px, where does the trailing item start?
Show the worked answer
At 220px from the start. The free margin is 140px: 300−80−80.
- Measure item bounds and the resolved auto margin.
- Keep DOM source order unchanged when checking alignment.