使用 Margin Auto 水平靠左 | 次世代 Hugo

水平靠左直覺會使用 Flexbox Layout 的 justify-content: flex-start，事實上也可使用 Flow Layout 的 margin-right: auto 更精簡。

Version

CSS 3

margin-right: auto

紅色正方形水平靠左。

<template>
  <div class="box"/>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-right: auto;
}
</style>

• margin-right: auto：<div> 右側 margin 將依剩餘寬度自動調整，因此 <div> 相當於水平靠左

Conclusion

• margin-right: auto 與 Flexbox 都能水平靠左，唯 Flexbox 是從父層處理，故須在外層多加一層 <div>；而 margin-right: auto 是從子層處理，故可直接針對 element 設定

Reference

MDN, margin