| Flex 的重要觀念 |

CH5 22

主軸與交錯軸對齊方式

| justify-content |

// 此圖出處為六角學院 ▼
Bootstrap-justify-content 示意圖

| align-items |

  • align-items: baseline; 與文字的行高有關,以文字基準線開始做排列

// 此圖出處為六角學院 ▼
Bootstrap-align-items 示意圖

| align-self |

  • align-self 只會針對自己的屬性作設定 ( 綠色框線物件 ),不會影響其他屬性

// 此圖出處為六角學院 ▼
Bootstrap-align-self 示意圖


| Bootstrap 通用類別與 Flex | 範例

CH5 23

Bootstrap 官網路徑: Utilities / Flex

bootstrap外層屬性組合

bootstrap內層屬性組合

套用方式

  • 1 與 2 的 .box 皆靠右。 flex 預設 row 所以直接帶入 .justify-content-end 讓主軸靠右邊即可
<div class="row justify-content-center">
    <div class="col-3">
        <div class="box">1</div>
    </div>
    <div class="col-3">
        <div class="box">2</div>
    </div>
</div>
  • .box 垂直,靠右
<div class="row flex-column align-items-end ">
    <div class="col-6">
        <div class="box"></div>
    </div>
    <div class="col-6">
        <div class="box"></div>
    </div>
    <div class="col-6">
        <div class="box"></div>
    </div>
</div>

| Container 觀念 |

CH5 24

01 範例 | Bootstrap Container 觀念 : 只有 .col 內部 .box 加入背景色 ,下方範例可更清楚看到有無滿版的差異。

02 範例 | Bootstrap-Container-fluid 與 Container : .col 與內部 .box 皆加入背景色,可更清楚分辨有無滿版的不同處。

  • Bootstrap 的 container class主要是用來定義最外層的容器,使用上分兩大類
    • 滿版寬度 .container-fluid : 寬度完全彈性,照螢幕等比例縮放
      • 所謂的滿版就是容器的滿版,內容還是會有左右白色的白邊
    • 階段固定寬度 container : 對於網頁內容寬度的階段美感都很要求,且須最大寬度限制可使用此
      • 這邊最大寬度設定 1140px ,有些網頁內容不須最到完全滿版,顯內容較寬較鬆散。
      • 注意 : container 斷點<575px 時是彈性寬度 width:auto; ,> 575px 寬度才會固定,如下(下方會解說這些固定寬度怎麼來的) :
        • 小於 575 , width : auto ;
        • 大於 576 , width : 540 px ; (大於576px 寬度固定於 540 px)
        • 大於 768 , width : 720 px ;
        • 大於 992 , width : 960 px ;
        • 大於 1200 , width : 1140 px ;
      • 如果要呈現滿版(無左右白色空白),就不須加 .container-fluid 和 .container 囉!

// 此示意圖為 容器.col-6 裡的內容 .box 有設定背景色,所以就算滿版是容器部分,內容部分還是有左右空白距離 ▼
Bootstrap--Container-box設背景色觀念示意圖1

// 此示意圖為 容器.col-6 與裡面的內容 .box 有設定背景色,所以 .container-fluid 就會呈現下方示意圖的容器滿版狀態 ▼
Bootstrap--Container-觀念-col與box設背景色示意圖2

// 容器.col-6 與 內容.box 的拆解圖 ▼
Bootstrap--Container-觀念-col與box拆解圖01

不同斷點的 固定寬度是怎麼來的呢?

  • 因為 Grid 內層的 column ,左右邊都有出現額外的 padding ,所以外層的 row 需要負值的 margin 做補回 。Grid 的內容才能完全做補齊。 如果把 row 放置最外層下方會出現捲軸,如果有補上 .container 就會把此負值補回,並產生額外的 Gutter on outside 讓 Grid System 變得更完整

註 : Gutter on outside 可看 上篇
Bootstrap-不同斷點固定寬度


| Bootstrap Flex 補充說明 | 範例

CH5 25

  • order 屬性 : 順序排列用的屬性,數值小的會在前面
  • Bootstrap 中 .row 預設就有 flex-wrap: wrap ; 所以可把 .row .col-數值 中的 .row 換成 .d-flex .flex-wrap 試試
  • align-content 屬性 : 對齊屬性,是全體元件的對齊,包括換行 ( wrap ) 後的屬性皆一起對齊。但是需於 wrap 的環境下才可使用

Bootstrap  Flex 補充說明01

Bootstrap  Flex 補充說明02

範例解說

  • order 屬性
    • Bootstrap 中 ≥sm 斷點 (576px) 排序為 132,< 575 px 則為123
    • 如果未設定斷點尺寸 .order-數值 ,則手機至桌機皆同排序
  • flex-wrap 屬性
    • Bootstrap中 .row 預設換行,所以把它換成 .d-flex 加上 .flex-wrap 試試
  • align-content 屬性
    • .row 加上 .align-content 的各種屬性值試試。可於 .row 加上高度會比較清楚喔!!

| 通用類別中的 spacing 妙用 | 範例

CH5 26
Bootstrap 官網路徑: Utilities / Spacing

  • 功用 : 讓元件輕鬆加入 margin 與 padding
  • 寫法 : {property}{sides}-{size} → 屬性 方向 尺寸

| auto 於 flex 中的用法 | 範例

// 1 靠左,2和3靠右 ▼
Bootstrap-auto在flex中的用法

| 方法1 |

  • 先把三個區塊靠右 .justify-content-end
  • 區塊 2 設定 margin-left:auto; ,區塊 1 就被推到左方
  • 解釋 : 相鄰的元素會因為這個 auto 把另一個元素推到另一邊

| 方法2 |

  • 也可以不用先在 row 加上 .justify-content-xxx ,直接寫在 .col-
<!--方法 1  → 1靠左 2.3靠右-->
<div class="container mt-3">
    <div class="row justify-content-end">
        <div class="col-3">
            <div class="box">1</div>
        </div>
        <div class="col-3 ml-auto">
            <div class="box">2</div>
        </div>
        <div class="col-3">
            <div class="box">3</div>
        </div>
    </div>
</div>

<!--方法 2 直接寫在 .col- 上 → 1靠左 2.3靠右-->
<div class="container mt-3">
    <div class="row">
        <div class="col-3">
            <div class="box">1</div>
        </div>
        <div class="col-3 ml-auto">
            <div class="box">2</div>
        </div>
        <div class="col-3">
            <div class="box">3</div>
        </div>
    </div>
</div>

| 使用 Grid 製作時間軸排版 | 範例

CH5 29

Bootstrap 官網路徑: Utilities / Flex → 中反向效果 reverse

Bootstrap 官網路徑: Layout_Responsive breakpoints

  • 先於 .container 內架構 .row.col- ,分別帶入內容文字與圖片
  • 3個 MARKDOWN_HASHc84701142e32380d9882624871ebd9f7MARKDOWNHASH 排版中的第二個想要與圖左文字右的反向效果,可帶入 Booystrap 中的 reverse → Utilities / Flex Direction ,並帶入斷點( 這邊使用 sm ,567px以下與其他版型相同 ), 讓排版於手機版時,都呈現上方文字下方圖片排列。
  • 中間的時間軸排版,使用 positon:relative;position:absolute ; 下去做處裡。
  • 時間軸置中,使用到 left:50%; 但因為是向左推50%,所以會有線靠右的問題,可使用 transform:translateX(-50%); 把時間軸位置拉回正中間。
    • transform 為 CSS 的變形方式,其中還包含位移

課堂問答

[ 問題 ] 如果一個元素包含 col-sm-12 及 col-md-6 的 className ?

[ 答案 ] 50%

  • 斷點由小到大,所以 1200px 會使用 .col-md-6 的寬度 )
  • .col-sm-12 及 .col-md-6 → 767px 以下元素寬度為 100% ,768px 以上元素寬度為 50%
  • .col-sm-6 → 575px 以下元素寬度為 100% ,576px 以上元素寬度為 50%;
/*sm (landscape phones, 576px 以上)*/
@media (min-width: 576px) { ... }

/* md (tablets, 768px 以上)*/
@media (min-width: 768px) { ... }

/*lg (desktops, 992px 以上)*/
@media (min-width: 992px) { ... }

/*xl (large desktops, 1200px 以上)*/
@media (min-width: 1200px) { ... }

資料來源

最後修改日期: 25 2 月, 2020

作者