Bootstrap - Flex 佈局

上一頁
下一頁

本章討論 Flex 佈局實用工具。.flex 實用工具類有助於快速管理網格列、導航、元件等的佈局、對齊和大小。

啟用 Flex 佈局行為

使用 display 實用工具類來建立一個 Flexbox 容器並將直接子元素轉換為 Flex 專案，允許透過其他 Flex 屬性進一步自定義 Flex 容器和專案。

讓我們來看一個 Flex 容器和一個內聯 Flex 容器的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities</h4>
    <div class="d-flex p-4 bg-info">A simple flexbox container!</div>
    <div class="d-inline-flex p-4 bg-warning">An inline flexbox container!</div>
  </body>
</html>

.d-flex 和 .d-inline-flex 類也有適用於不同螢幕尺寸的變體。

  • .d-flex

  • .d-inline-flex

  • .d-sm-flex

  • .d-sm-inline-flex

  • .d-md-flex

  • .d-md-inline-flex

  • .d-lg-flex

  • .d-lg-inline-flex

  • .d-xl-flex

  • .d-xl-inline-flex

  • .d-xxl-flex

  • .d-xxl-inline-flex

方向

使用方向實用工具類，您可以設定 Flex 容器中 Flex 專案的方向。以下是 Bootstrap 提供的方向實用工具類：

  • .flex-row - 設定水平方向，這也是瀏覽器的預設值。

  • .flex-row-reverse - 從相反方向開始水平方向。

  • .flex-column - 設定垂直方向。

  • .flex-column-reverse - 從相反方向開始垂直方向。

讓我們來看一個方向實用工具類類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - direction (row & column)</h4>
    <div class="d-flex flex-row mb-4 bg-info border border-dark">
      <div class="p-3 border border-dark">Row One</div>
      <div class="p-3 border border-dark">Row Two</div>
      <div class="p-3 border border-dark">Row Three</div>
    </div>
    <div class="d-flex flex-row-reverse bg-warning border border-success">
      <div class="p-3 border border-success">Row Four</div>
      <div class="p-3 border border-success">Row Five</div>
      <div class="p-3 border border-success">Row Six</div>
    </div>
    <div class="d-flex flex-column mb-3 bg-danger-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column One</div>
      <div class="p-3 border border-dark">Column Two</div>
      <div class="p-3 border border-dark">Column Three</div>
    </div>
    <div class="d-flex flex-column-reverse bg-light border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
    </div>
  </body>
</html>

.flex-direction 類也有適用於不同螢幕尺寸的變體。

  • .flex-row

  • .flex-row-reverse

  • .flex-column

  • .flex-column-reverse

  • .flex-sm-row

  • .flex-sm-row-reverse

  • .flex-sm-column

  • .flex-sm-column-reverse

  • .flex-md-row

  • .flex-md-row-reverse

  • .flex-md-column

  • .flex-md-column-reverse

  • .flex-lg-row

  • .flex-lg-row-reverse

  • .flex-lg-column

  • .flex-lg-column-reverse

  • .flex-xl-row

  • .flex-xl-row-reverse

  • .flex-xl-column

  • .flex-xl-column-reverse

  • .flex-xxl-row

  • .flex-xxl-row-reverse

  • .flex-xxl-column

  • .flex-xxl-column-reverse

主軸對齊

.justify-content 實用工具類用於更改 Flex 專案在主軸上的對齊方式，即x 軸開頭，如果flex-direction: column，則為y 軸。

可用的不同選項是：

  • start（開始）

  • end（結束）

  • center（居中）

  • between（兩端對齊）

  • around（環繞對齊）

  • evenly（均勻分佈）

讓我們來看一個主軸對齊類別的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - Justify content</h4>
    <div class="d-flex justify-content-start mb-4 bg-info border border-dark">
      <div class="p-3 border border-dark">Row One</div>
      <div class="p-3 border border-dark">Row Two</div>
      <div class="p-3 border border-dark">Row Three</div>
    </div>
    <div class="d-flex justify-content-end mb-4 bg-warning border border-success">
      <div class="p-3 border border-success">Row Four</div>
      <div class="p-3 border border-success">Row Five</div>
      <div class="p-3 border border-success">Row Six</div>
    </div>
    <div class="d-flex justify-content-center mb-4 bg-danger-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column One</div>
      <div class="p-3 border border-dark">Column Two</div>
      <div class="p-3 border border-dark">Column Three</div>
    </div>
    <div class="d-flex justify-content-between mb-4 bg-light border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
      <div class="d-flex justify-content-around mb-4 bg-success-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
      <div class="d-flex justify-content-evenly mb-4 bg-primary-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
    </div>
  </body>
</html>

.justify-content 類也有適用於不同螢幕尺寸的變體。

  • .justify-content-start

  • .justify-content-end

  • .justify-content-center

  • .justify-content-between

  • .justify-content-around

  • .justify-content-evenly

  • .justify-content-sm-start

  • .justify-content-sm-end

  • .justify-content-sm-center

  • .justify-content-sm-between

  • .justify-content-sm-around

  • .justify-content-sm-evenly

  • .justify-content-md-start

  • .justify-content-md-end

  • .justify-content-md-center

  • .justify-content-md-between

  • .justify-content-md-around

  • .justify-content-md-evenly

  • .justify-content-lg-start

  • .justify-content-lg-end

  • .justify-content-lg-center

  • .justify-content-lg-between

  • .justify-content-lg-around

  • .justify-content-lg-evenly

  • .justify-content-xl-start

  • .justify-content-xl-end

  • .justify-content-xl-center

  • .justify-content-xl-between

  • .justify-content-xl-around

  • .justify-content-xl-evenly

  • .justify-content-xxl-start

  • .justify-content-xxl-end

  • .justify-content-xxl-center

  • .justify-content-xxl-between

  • .justify-content-xxl-around

  • .justify-content-xxl-evenly

交叉軸對齊

為了更改 Flexbox 容器中 Flex 專案的對齊方式，請使用實用工具類align-items。

Bootstrap 中可用的選項如下：

  • start（開始）

  • end（結束）

  • center（居中）

  • baseline（基線）

  • stretch（瀏覽器預設值）

讓我們來看一個交叉軸對齊實用工具類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - align items</h4>
    <div class="d-flex align-items-start flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-primary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-danger">
            Item 3
        </div>
    </div>
    <div class="d-flex align-items-end flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="border border-dark p-2 bg-secondary-subtle">
            Item 2
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex align-items-center flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 text-bg-info">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-secondary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-warning">
            Item 3
    </div>
    </div>
  </body>
</html>

.align-items 類也有適用於不同螢幕尺寸的變體。

  • .align-items-start

  • .align-items-end

  • .align-items-center

  • .align-items-baseline

  • .align-items-stretch

  • .align-items-sm-start

  • .align-items-sm-end

  • .align-items-sm-center

  • .align-items-sm-baseline

  • .align-items-sm-stretch

  • .align-items-md-start

  • .align-items-md-end

  • .align-items-md-center

  • .align-items-md-baseline

  • .align-items-md-stretch

  • .align-items-lg-start

  • .align-items-lg-end

  • .align-items-lg-center

  • .align-items-lg-baseline

  • .align-items-lg-stretch

  • .align-items-xl-start

  • .align-items-xl-end

  • .align-items-xl-center

  • .align-items-xl-baseline

  • .align-items-xl-stretch

  • .align-items-xxl-start

  • .align-items-xxl-end

  • .align-items-xxl-center

  • .align-items-xxl-baseline

  • .align-items-xxl-stretch

單個專案對齊

為了更改容器中單個 Flexbox 專案的對齊方式，請使用實用工具類align-self。此實用工具類可用的選項如下：

  • start（開始）

  • end（結束）

  • center（居中）

  • baseline（基線）

  • stretch（瀏覽器預設值）

讓我們來看一個交叉軸對齊實用工具類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - align self</h4>
    <div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="align-self-start border border-dark p-2 text-bg-primary">
            align start
        </div>
        <div class="border border-dark p-2 text-bg-danger">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="align-self-end border border-dark p-2 bg-secondary-subtle">
            align end
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="align-self-center border border-dark p-2 text-bg-info">
            align center
        </div>
        <div class="border border-dark p-2 text-bg-secondary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-warning">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="align-self-baseline border border-dark p-2 bg-secondary-subtle">
            align baseline
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-primary">
            Item 2
        </div>
        <div class="align-self-stretch border border-dark p-2 text-bg-danger">
            align stretch
        </div>
    </div>
    </div>
  </body>
</html>

.align-self 類也有適用於不同螢幕尺寸的變體。

  • .align-self-start

  • .align-self-end

  • .align-self-center

  • .align-self-baseline

  • .align-self-stretch

  • .align-self-sm-start

  • .align-self-sm-end

  • .align-self-sm-center

  • .align-self-sm-baseline

  • .align-self-sm-stretch

  • .align-self-md-start

  • .align-self-md-end

  • .align-self-md-center

  • .align-self-md-baseline

  • .align-self-md-stretch

  • .align-self-lg-start

  • .align-self-lg-end

  • .align-self-lg-center

  • .align-self-lg-baseline

  • .align-self-lg-stretch

  • .align-self-xl-start

  • .align-self-xl-end

  • .align-self-xl-center

  • .align-self-xl-baseline

  • .align-self-xl-stretch

  • .align-self-xxl-start

  • .align-self-xxl-end

  • .align-self-xxl-center

  • .align-self-xxl-baseline

  • .align-self-xxl-stretch

填充

將.flex-fill 類應用於一組兄弟元素時，它們將自動調整其寬度以匹配其內容（如果其內容未超過其 border-boxes，則具有相等的寬度），有效地利用所有可用的水平空間。

讓我們來看一個.flex-fill 類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - flex-fill</h4>
    <div class="d-flex border border-dark bg-danger-subtle">
      <div class="p-2 border border-dark flex-fill">Flex item showing a longer string of text.</div>
      <div class="p-2 border border-dark flex-fill">Item</div>
      <div class="p-2 border border-dark flex-fill">Flex Item 3</div>
    </div>
    </div>
  </body>
</html>

針對不同螢幕尺寸的變體也適用於類.flex-fill

  • .flex-fill

  • .flex-sm-fill

  • .flex-md-fill

  • .flex-lg-fill

  • .flex-xl-fill

  • .flex-xxl-fill

擴充套件(Grow)

您可以使用.flex-grow-*實用程式類來控制彈性專案是否應擴充套件以佔用可用空間。

讓我們來看一個.flex-grow類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - flex-grow</h4>
      <div class="d-flex border border-dark bg-danger-subtle">
        <div class="p-2 border border-dark">Flex item</div>
        <div class="p-2 flex-grow-1 border border-dark">Flex</div>
        <div class="p-2 border border-dark">Third flex item</div>
      </div>
    </div>
  </body>
</html>

收縮(Shrink)

您可以使用.flex-shrink-*實用程式類來控制彈性專案是否需要收縮。

讓我們來看一個.flex-shrink類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - flex-shrink</h4>
      <div class="d-flex border border-dark bg-danger-subtle">
        <div class="p-2 border border-dark w-100">Flex item taking up all the space</div>
        <div class="p-2 border border-dark flex-shrink-1">Flex item shrink</div>
      </div>
    </div>
  </body>
</html>

針對不同螢幕尺寸的變體也適用於.flex-grow和.flex-shrink類

  • .flex-{grow|shrink}-0

  • .flex-{grow|shrink}-1

  • .flex-sm-{grow|shrink}-0

  • .flex-sm-{grow|shrink}-1

  • .flex-md-{grow|shrink}-0

  • .flex-md-{grow|shrink}-1

  • .flex-lg-{grow|shrink}-0

  • .flex-lg-{grow|shrink}-1

  • .flex-xl-{grow|shrink}-0

  • .flex-xl-{grow|shrink}-1

  • .flex-xxl-{grow|shrink}-0

  • .flex-xxl-{grow|shrink}-1

自動邊距(Auto margins)

您可以將彈性對齊與自動邊距混合使用。

以下類可與自動邊距一起使用

  • me-auto - 將彈性專案推到最右邊。

  • ms-auto - 將彈性專案推到最左邊。

  • 預設情況下沒有自動邊距。

讓我們來看一個自動邊距類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - auto margin</h4>
      <div class="d-flex mb-3 bg-primary-subtle">
        <div class="p-2 border border-dark">No margin</div>
        <div class="p-2 border border-dark">No margin</div>
        <div class="p-2 border border-dark">No margin</div>
      </div>
      <div class="d-flex mb-3 bg-warning-subtle">
        <div class="me-auto p-2 border border-dark">Right margin</div>
        <div class="p-2 border border-dark">Right margin</div>
        <div class="p-2 border border-dark">Right margin</div>
      </div>
      <div class="d-flex mb-3 bg-danger-subtle">
        <div class="p-2 border border-dark">Left margin</div>
        <div class="p-2 border border-dark">Left margin</div>
        <div class="ms-auto p-2 border border-dark">Left margin</div>
      </div>
    </div>
  </body>
</html>

結合專案對齊(With align-items)

要將彈性專案定位在容器的頂部或底部，請使用align-items, flex-direction: column以及margin-top: auto或margin-bottom: auto進行垂直調整。

讓我們來看一個示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - with align items</h4>
    <div class="d-flex align-items-start flex-column mb-3 text-bg-success border border-dark" style="height: 200px;">
      <div class="mb-auto p-2 border border-dark">Align to left</div>
      <div class="p-2 border border-dark">Align to left</div>
      <div class="p-2 border border-dark">Align to left</div>
    </div>
    <div class="d-flex align-items-end flex-column mb-3 text-bg-warning border border-dark" style="height: 200px;">
      <div class="p-2 border border-dark">Align to right</div>
      <div class="p-2 border border-dark">Align to right</div>
      <div class="mt-auto p-2 border border-dark">Align to right</div>
    </div>
    </div>
  </body>
</html>

在上面的示例中，mt-auto表示margin-top: auto，mb-auto表示margin-bottom: auto。

換行(Wrap)

彈性容器的彈性專案可以換行。以下是可用於換行彈性專案的實用程式類

  • .flex-nowrap - 完全不換行（預設）。

  • .flex-wrap - 彈性專案換行。

  • .flex-wrap-reverse - 彈性專案反向換行。

讓我們來看一個.flex-nowrap類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - no wrap</h4>
    <div class="d-flex flex-nowrap text-bg-success border border-dark">
      <div class="p-2 border border-dark">Flex Item 1</div>
      <div class="p-2 border border-dark">Flex Item 2</div>
      <div class="p-2 border border-dark">Flex Item 3</div>
      <div class="p-2 border border-dark">Flex Item 4</div>
      <div class="p-2 border border-dark">Flex Item 5</div>
      <div class="p-2 border border-dark">Flex Item 6</div>
    </div>
    </div>
  </body>
</html>

讓我們來看一個.flex-wrap類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - wrap items</h4>
    <div class="d-flex flex-wrap text-bg-success border border-dark">
      <div class="p-2 border border-dark">Wrap Flex Item 1</div>
      <div class="p-2 border border-dark">Wrap Flex Item 2</div>
      <div class="p-2 border border-dark">Wrap Flex Item 3</div>
      <div class="p-2 border border-dark">Wrap Flex Item 4</div>
      <div class="p-2 border border-dark">Wrap Flex Item 5</div>
      <div class="p-2 border border-dark">Wrap Flex Item 6</div>
      <div class="p-2 border border-dark">Wrap Flex Item 7</div>
      <div class="p-2 border border-dark">Wrap Flex Item 8</div>
      <div class="p-2 border border-dark">Wrap Flex Item 9</div>
      <div class="p-2 border border-dark">Wrap Flex Item 10</div>
      <div class="p-2 border border-dark">Wrap Flex Item 11</div>
      <div class="p-2 border border-dark">Wrap Flex Item 12</div>
    </div>
    </div>
  </body>
</html>

讓我們來看一個.flex-wrap-reverse類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - wrap reverse items</h4>
    <div class="d-flex flex-wrap-reverse text-bg-success border border-dark">
      <div class="p-2 border border-dark">Wrap reverse Item 1</div>
      <div class="p-2 border border-dark">Wrap reverse Item 2</div>
      <div class="p-2 border border-dark">Wrap reverse Item 3</div>
      <div class="p-2 border border-dark">Wrap reverse Item 4</div>
      <div class="p-2 border border-dark">Wrap reverse Item 5</div>
      <div class="p-2 border border-dark">Wrap reverse Item 6</div>
      <div class="p-2 border border-dark">Wrap reverse Item 7</div>
      <div class="p-2 border border-dark">Wrap reverse Item 8</div>
      <div class="p-2 border border-dark">Wrap reverse Item 9</div>
      <div class="p-2 border border-dark">Wrap reverse Item 10</div>
      <div class="p-2 border border-dark">Wrap reverse Item 11</div>
      <div class="p-2 border border-dark">Wrap reverse Item 12</div>
    </div>
    </div>
  </body>
</html>

針對不同螢幕尺寸的變體也適用於類.flex-wrap

  • .flex-nowrap

  • .flex-wrap

  • .flex-wrap-reverse

  • .flex-sm-nowrap

  • .flex-sm-wrap

  • .flex-sm-wrap-reverse

  • .flex-md-nowrap

  • .flex-md-wrap

  • .flex-md-wrap-reverse

  • .flex-lg-nowrap

  • .flex-lg-wrap

  • .flex-lg-wrap-reverse

  • .flex-xl-nowrap

  • .flex-xl-wrap

  • .flex-xl-wrap-reverse

  • .flex-xxl-nowrap

  • .flex-xxl-wrap

  • .flex-xxl-wrap-reverse

順序(Order)

使用order實用程式，您可以更改特定彈性專案的視覺順序。

  • 選項僅用於將專案設定為第一或最後一個，並重置為使用DOM順序。

  • order接受從0到5的整數值

    .

讓我們來看一個.order類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - order change</h4>
    <div class="d-flex flex-nowrap text-bg-danger border border-dark">
      <div class="order-4 p-3 border border-dark">Item one</div>
      <div class="order-1 p-3 border border-dark">Item two</div>
      <div class="order-2 p-3 border border-dark">Item three</div>
      <div class="order-5 p-3 border border-dark">Item four</div>
      <div class="order-3 p-3 border border-dark">Item five</div>
      <div class="order-0 p-3 border border-dark">Item six</div>
    </div>
    </div>
  </body>
</html>

針對不同螢幕尺寸的變體也適用於類.order

  • .order-0

  • .order-1

  • .order-2

  • .order-3

  • .order-4

  • .order-5

  • .order-sm-0

  • .order-sm-1

  • .order-sm-2

  • .order-sm-3

  • .order-sm-4

  • .order-sm-5

  • .order-md-0

  • .order-md-1

  • .order-md-2

  • .order-md-3

  • .order-md-4

  • .order-md-5

  • .order-lg-0

  • .order-lg-1

  • .order-lg-2

  • .order-lg-3

  • .order-lg-4

  • .order-lg-5

  • .order-xl-0

  • .order-xl-1

  • .order-xl-2

  • .order-xl-3

  • .order-xl-4

  • .order-xl-5

  • .order-xxl-0

  • .order-xxl-1

  • .order-xxl-2

  • .order-xxl-3

  • .order-xxl-4

  • .order-xxl-5

此外，還有名為.order-first和.order-last的類，它們具有響應性，並透過分別為元素分配-1和6的順序來修改元素的順序。

  • .order-first

  • .order-last

  • .order-sm-first

  • .order-sm-last

  • .order-md-first

  • .order-md-last

  • .order-lg-first

  • .order-lg-last

  • .order-xl-first

  • .order-xl-last

  • .order-xxl-first

  • .order-xxl-last

對齊內容(Align content)

為了將彈性盒容器的彈性專案沿交叉軸對齊，請使用實用程式.align-content。以下是可用的選項

  • start (預設)

  • end（結束）

  • center（居中）

  • between（兩端對齊）

  • around（環繞對齊）

  • stretch

我們啟用了flex-wrap: wrap屬性並添加了更多彈性專案以展示這些實用程式的功能。

讓我們來看一個.align-content-*類的示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
    <h4>Flex utilities - align content</h4>
    <!--align-content-start-->
    <div class="d-flex flex-column bd-highlight text-bg-info mb-3 flex-wrap align-content-start">
        <div class="border p-2 bd-highlight">
            Flex item 1 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 
        </div>
    </div>
    <!--align-content-center-->
    <div class="d-flex flex-column bd-highlight text-bg-warning mb-3 flex-wrap align-content-center">
        <div class="border p-2 bd-highlight">
            Flex item 1 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 
        </div>
    </div>
    <!--align-content-end-->
    <div class="d-flex flex-column bd-highlight text-bg-danger mb-3 flex-wrap align-content-end">
      <div class="border p-2 bd-highlight">
          Flex item 1 
      </div>
      <div class="border p-2 bd-highlight">
          Flex item 2 
      </div>
      <div class="border p-2 bd-highlight">
          Flex item 3 
      </div>
    </div>
    <!--align-content-stretch-->
    <div class="d-flex flex-column bd-highlight text-bg-primary mb-3 flex-wrap align-content-stretch">
      <div class="border p-2 bd-highlight">
        Flex item 1 
      </div>
      <div class="border p-2 bd-highlight">
        Flex item 2 
      </div>
      <div class="border p-2 bd-highlight">
        Flex item 3 
      </div>
    </div>
  </div>
  </body>
</html>

針對不同螢幕尺寸的變體也適用於類.align-content

  • .align-content-start

  • .align-content-end

  • .align-content-center

  • .align-content-between

  • .align-content-around

  • .align-content-stretch

  • .align-content-sm-start

  • .align-content-sm-end

  • .align-content-sm-center

  • .align-content-sm-between

  • .align-content-sm-around

  • .align-content-sm-stretch

  • .align-content-md-start

  • .align-content-md-end

  • .align-content-md-center

  • .align-content-md-between

  • .align-content-md-around

  • .align-content-md-stretch

  • .align-content-lg-start

  • .align-content-lg-end

  • .align-content-lg-center

  • .align-content-lg-between

  • .align-content-lg-around

  • .align-content-lg-stretch

  • .align-content-xl-start

  • .align-content-xl-end

  • .align-content-xl-center

  • .align-content-xl-between

  • .align-content-xl-around

  • .align-content-xl-stretch

  • .align-content-xxl-start

  • .align-content-xxl-end

  • .align-content-xxl-center

  • .align-content-xxl-between

  • .align-content-xxl-around

  • .align-content-xxl-stretch

媒體物件(Media object)

您可以透過使用一些彈性實用程式輕鬆快速地重新建立媒體物件元件，這些實用程式比以前提供了更多靈活性和選項。

讓我們來看一個示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h4>Flex utilities - Media object</h4>
    </div>
    <div class="d-flex align-items-center border mx-4 w-50 mt-3">
      <div class="flex-md-shrink-0">
        <img src="https://i1.wp.com/simplesnippets.tech/wp-content/uploads/2018/07/tutorialspoint.jpg?resize=500%2C500&ssl=1">
      </div>
      <div class="flex-md-grow-1">
      Content related to the image is placed at the center of the image, as we have used the class .align-items-center. The image is the logo of "Tutorials Point".
    </div>
    </div>
  </body>
</html>
列印頁面
上一頁
下一頁
廣告