タグ : CSS
使用 Margin Auto 水平靠右
水平靠右直覺會使用 Flexbox Layout 的 justify-content: flex-end，事實上也可使用 Flow Layout 的 margin-left: auto 更精簡。
使用 Margin Auto 水平靠左
水平靠左直覺會使用 Flexbox Layout 的 justify-content: flex-start，事實上也可使用 Flow Layout 的 margin-right: auto 更精簡。
使用 Margin Auto 水平置中
水平置中直覺會使用 Flexbox Layout 的 justify-content: center，事實上也可使用 Flow Layout 的 margin: auto 更精簡。
使用 Object Fit 與 Object Position 統一圖片長寬
若圖片由 API 以 Base64 String 傳回且圖片大小不一，此時 Front-end 為了美觀必須在不改變原圖比例下有相同長寬，此時可使用 CSS 的 Object Fit 與 Object Position 完成。
使用 Vertical Align 垂直排版
當多個不同高度的 inline 或 inline-block 水平並列時，可由 vertical-align 指定各 Element 該如何垂直對齊。
將 Element 轉成 inline-block
HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: inline-element 可將 Inline / Block 強制轉成 Inline-block。