使用 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。
將 Element 轉成 Inline
HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: inline 可將 Block Element 強制轉成 Inline Element。
將 Element 轉成 Block
HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: block 可將 Block 強制轉成 Inline。
深入探討 Inline、Block 與 Inline-block
HTML 的 Element 共分成 Inline、Block 與 Inline-block 三種類型，其中 Inline-block 具有部分 Inline 特性，也具備部分 Block 特性，因此稱為 Inline-block。
使用 float 設定文繞圖
文繞圖為實務上常見需求，若只使用 <img> 與 <div>，則 <img> 與 <div> 會各自一行顯示，可使用 CSS 對 <img>設定 float 達成文繞圖。