先看這個例子
300px flex 橫列內，「原始檔」和「結果」各佔 60px。最後一項用 margin-inline-start:auto，把餘下 180px 放在自己之前。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 第一項 | 量度起點偏移 | 0px |
| 最後一項 | 300−60 | 起點偏移 240px |
| 餘下間距 | 300−60−60 | 最後一項前有 180px |
瀏覽器怎樣處理
Auto margin 會先吸收正的餘下空間，再做主軸對齊。inline-start 依文字方向對應，本例預設 LTR。私下測試 RTL 鏡像，不代表中文應設為由右至左。
把兩項置中，是另一種安排
反例把兩項一起置中，並非把餘下空間全留在最後一項前。
<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>原始檔</p><p>結果</p></section>兩項起點為 90px、150px，不是 0px、240px。
試着修正
每項改成 80px，橫列仍闊 300px，最後一項在哪裏開始？
查看參考答案
從起點後 220px 開始；餘下 margin 是 140px，即 300−80−80。
- 量度各項外框和解算後的 auto margin。
- 核對對齊時，DOM 原始排列維持不變。