文章前提

Utilities 中 Embeb內嵌 , Flex 統整

| 內嵌 Embed |

CH6 40

內嵌

  • 響應式 iframe 功能,主要會使用在 Youtube 影片上。
  • 會隨視窗做縮放,保留 iframe 的比例
    • 比例分別為 21:9 , 16:9 , 4:3 , 1:1
  • 將下方目標,替換成不同尺寸 ( 21by9 , 16by9 , 4by3 , 1by1 ) ,內層需由 iframe 帶入影音網址
    • 不是所有影音都可以做嵌入,如果是 youtibe 嵌入網址中間會有 /embed/
<div class="embed-responsive embed-responsive-目標">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

| Flex |

CH6 41

Direction

  • 將目標,換成不同 flex-{ row | row-reverse | column | column-reverse }
  • 直接進入 範例 觀看變化

Justify content

  • 將目標,換成不同 justify-content-{ start | end | center | between | around }
  • 直接進入 範例 觀看變化

Align items

  • 將目標,換成不同 align-items-{ start | end | center | baseline | stretch }
  • 直接進入 範例 觀看變化
  • align-items 針對全部元件做調整
    • .align-items-baseline 跟著文字基準線改變它的排列方式。可於三個元素中調整高度看看變化
    • .align-items-stretch 從起點至終點伸展開來

Align self

  • 將目標,換成不同 align-self-{ start | end | center | baseline | stretch }
  • Align-self 針對單一元件做調整

    『註』 align-items 針對全部內元件做調整,align-self 針對單一元件做調整

Auto margins

  • 將目標,替換成 ml-auto 使其顯示改變
  • .ml-auto ,.mr-auto, .mx-auto
    • 路徑:Utilities / Spacing
  • 可用於 flex 的內元件,把兩個相鄰的 flex 內元件,把空間推移開來

換行 wrap

  • flex- { wrap | nowrap | wrap | wrap-reverse }

排序 order

  • 可重新排列 flex 元件的順序
  • 提供 1~12 值,至入目標中,數值越小越前面 → .order-目標

align-content

  • 範例
  • align-content- { start | end | center | between | around | stretch }
  • align-content 僅有在 flex-wrap 下有效 ( 一定要換行 )

資料來源

最後修改日期: 8 3 月, 2020

作者