Bootstrap4 Flex（彈性）布局

Bootstrap4 通過 flex 類來控制頁面的布局。

彈性盒子(flexbox)

Bootstrap 3 與 Bootstrap 4 最大的區(qū)別就是 Bootstrap 4  使用彈性盒子來布局，而不是使用浮動(dòng)來布局。

彈性盒子是 CSS3 的一種新的布局模式，更適合響應(yīng)式的設(shè)計(jì)，如果你還不了解 flex，可以閱讀我們的 CSS3 彈性盒子(Flex Box) 教程

注意：IE9 及其以下版本不支持彈性盒子，所以如果你需要兼容 IE8-9，請使用 Bootstrap 3。

以下示例使用 d-flex 類創(chuàng)建一個(gè)彈性盒子容器，并設(shè)置三個(gè)彈性子元素：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Flex</h2>
  <p>使用 d-flex 類創(chuàng)建一個(gè)彈性盒子容器，并設(shè)置三個(gè)彈性子元素：</p>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

創(chuàng)建顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>行內(nèi) Flex</h2>
  <p>創(chuàng)建顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:</p>
  <div class="d-inline-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

水平方向

.flex-row 可以設(shè)置彈性子元素水平顯示，這是默認(rèn)的。

使用 .flex-row-reverse 類用于設(shè)置右對齊顯示，即與 .flex-row  方向相反。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>水平方向</h2>
  <p>使用 .flex-row 類設(shè)置彈性子元素水平顯示：</p>
  <div class="d-flex flex-row bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <p>.flex-row-reverse 設(shè)置右對齊方向:</p>
  <div class="d-flex flex-row-reverse bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

垂直方向

.flex-column 類用于設(shè)置彈性子元素垂直方向顯示,  .flex-column-reverse 用于翻轉(zhuǎn)子元素：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>垂直方向</h2>
  <p>.flex-column 類用于設(shè)置彈性子元素垂直方向顯示：</p>
  <div class="d-flex flex-column mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <p>.flex-column-reverse 類用于設(shè)置彈性子元素垂直方向翻轉(zhuǎn)顯示：</p>
  <div class="d-flex flex-column-reverse">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

內(nèi)容排列

.justify-content-* 類用于修改彈性子元素的排列方式，* 號允許的值有：start (默認(rèn)), end, center, between 或 around:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>內(nèi)容排列方式</h2>
  <p> .justify-content-* 類用于修改彈性子元素的排列方式，* 號允許的值有：start (默認(rèn)), end, center, between 或 around:</p>
  <div class="d-flex justify-content-start bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-end bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-center bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-between bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-around bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

等寬

.flex-fill 類強(qiáng)制設(shè)置各個(gè)彈性子元素的寬度是一樣的:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>等寬</h2>
  <p>.flex-fill 類強(qiáng)制設(shè)置各個(gè)彈性子元素的寬度是一樣的:</p>
  <div class="d-flex mb-3">
    <div class="p-2 flex-fill bg-info">Flex item 1</div>
    <div class="p-2 flex-fill bg-warning">Flex item 2</div>
    <div class="p-2 flex-fill bg-primary">Flex item 3</div>
  </div>
  <p>不使用 .flex-fill 類示例:</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

擴(kuò)展

.flex-grow-1  用于設(shè)置子元素使用剩下的空間。以下示例中前面兩個(gè)子元素只設(shè)置了它們所需要的空間，最后一個(gè)獲取剩余空間。 :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>擴(kuò)展</h2>
  <p>.flex-grow-1 用于設(shè)置子元素使用剩下的空間：</p>
  <div class="d-flex mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
  </div>
  <p>不使用 .flex-grow-1 示例:</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

提示: 使用 .flex-shrink-1 用于設(shè)置子元素的收縮規(guī)則。

排序

.order 類可以設(shè)置彈性子元素的排序，從 .order-1 到 .order-12，數(shù)字越低權(quán)重越高( .order-1 排在 .order-2 之前) :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>排序</h2>
  <p>.order 類可以設(shè)置彈性子元素的排序，從 .order-1 到 .order-12，數(shù)字越低權(quán)重越高:</p>
  <div class="d-flex mb-3">
    <div class="p-2 order-3 bg-info">Flex item 1</div>
    <div class="p-2 order-2 bg-warning">Flex item 2</div>
    <div class="p-2 order-1 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

外邊距

.mr-auto 類可以設(shè)置子元素右外邊距為 auto，即 margin-right: auto!important;，.ml-auto 類可以設(shè)置子元素左外邊距為 auto，即 margin-left: auto!important;:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>外邊距</h2>
  <p>.mr-auto 類可以設(shè)置子元素右外邊距為 auto，.ml-auto 類可以設(shè)置子元素左外邊距為 auto，</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 mr-auto bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2  bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 ml-auto bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

包裹

彈性容器中包裹子元素可以使用以下三個(gè)類： .flex-nowrap (默認(rèn)), .flex-wrap 或 .flex-wrap-reverse。設(shè)置 flex 容器是單行或者多行。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>包裹</h2>
  <p>彈性容器中包裹彈性子元素可以使用以下三個(gè)類： .flex-nowrap (默認(rèn)), .flex-wrap 或 .flex-wrap-reverse:</p>
  <p><code>.flex-wrap:</code></p>
  <div class="d-flex flex-wrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p><code>.flex-wrap-reverse:</code></p>
  <div class="d-flex flex-wrap-reverse bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p><code>.flex-nowrap:</code></p>
  <div class="d-flex flex-nowrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
    <div class="p-2 border">Flex item 26</div>
    <div class="p-2 border">Flex item 27</div>
    <div class="p-2 border">Flex item 28</div>
    <div class="p-2 border">Flex item 29</div>
    <div class="p-2 border">Flex item 30</div>
    <div class="p-2 border">Flex item 31</div>
    <div class="p-2 border">Flex item 32</div>
    <div class="p-2 border">Flex item 33</div>
    <div class="p-2 border">Flex item 34</div>
    <div class="p-2 border">Flex item 35</div>
  </div>
  <br>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

內(nèi)容對齊

我們可以使用 .align-content-* 來控制在垂直方向上如何去堆疊子元素，包含的值有：.align-content-start (默認(rèn)), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

這些類在只有一行的彈性子元素中是無效的。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>內(nèi)容對齊</h2>
  <p>我們可以使用 .align-content-* 來控制子元素在垂直方向的對齊方式。</p>
  <p><strong>注意:</strong> 這個(gè)示例在小型設(shè)備上效果不好。這些類在只有一行的彈性子元素中是無效的。</p>
  <p>.align-content-start (默認(rèn)):</p>
  <div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p>.align-content-end:</p>
  <div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p>.align-content-center:</p>
  <div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p>.align-content-around:</p>
  <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p>.align-content-stretch:</p>
  <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

子元素對齊

如果要設(shè)置單行的子元素對齊可以使用 .align-items-* 類來控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默認(rèn))。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>子元素對齊</h2>
  <p>如果要設(shè)置單行的子元素對齊可以使用 .align-content-* 類來控制。</p>
  <p>.align-items-start:</p>
  <div class="d-flex align-items-start bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-end:</p>
  <div class="d-flex align-items-end bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-center:</p>
  <div class="d-flex align-items-center bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-baseline:</p>
  <div class="d-flex align-items-baseline bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-stretch (默認(rèn)):</p>
  <div class="d-flex align-items-stretch bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

指定子元素對齊

如果要設(shè)置指定子元素對齊對齊可以使用 .align-self-* 類來控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默認(rèn))。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Align Self</h2>
  <p>如果要設(shè)置指定子元素對齊對齊可以使用 .align-self-* 類來控制。</p>
  <p>.align-self-start:</p>
  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-start">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-end:</p>
  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-end">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-center:</p>
  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-center">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-baseline:</p>
  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-baseline">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-stretch (默認(rèn)):</p>
  <div class="d-flex bg-light" style="height:150px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-stretch">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
</div>
</body>
</html>
測試看看 ?/?

運(yùn)行后效果如下:

圖片.png

響應(yīng)式 flex 類

我們可以根據(jù)不同的設(shè)備，設(shè)置 flex 類，從而實(shí)現(xiàn)頁面響應(yīng)式布局，以下表格中的 * 號可以的值有：sm, md, lg 或 xl, 對應(yīng)的是小型設(shè)備、中型設(shè)備，大型設(shè)備，超大型設(shè)備。

類示例實(shí)現(xiàn)
彈性容器
.d-*-flex根據(jù)不同的屏幕設(shè)備創(chuàng)建彈性盒子容器嘗試一下  
方向
.flex-*-row根據(jù)不同的屏幕設(shè)備在水平方向顯示彈性子元素嘗試一下  
.flex-*-column根據(jù)不同的屏幕設(shè)備在垂直方向顯示彈性子元素嘗試一下  
內(nèi)容對齊
.justify-content-*-start根據(jù)不同屏幕設(shè)備在開始位置顯示彈性子元素 (左對齊)嘗試一下  
.justify-content-*-center根據(jù)不同屏幕設(shè)備在 flex 容器中居中顯示子元素嘗試一下  
.justify-content-*-around根據(jù)不同屏幕設(shè)備使用  "around" 顯示彈性子元素嘗試一下  
擴(kuò)展
.flex-*-grow-0不同的屏幕設(shè)備不設(shè)置擴(kuò)展 
.flex-*-grow-1不同的屏幕設(shè)備設(shè)置擴(kuò)展 
收縮
.flex-*-shrink-0不同的屏幕設(shè)備不設(shè)置收縮 
.flex-*-shrink-1不同的屏幕設(shè)備設(shè)置收縮 
包裹
.flex-*-nowrap不同的屏幕設(shè)備不設(shè)置包裹元素嘗試一下  
.flex-*-wrap-reverse不同的屏幕設(shè)備反轉(zhuǎn)包裹元素嘗試一下  
.align-content-*-end根據(jù)不同屏幕設(shè)備在結(jié)束位置堆疊元素嘗試一下  
.align-content-*-around根據(jù)不同屏幕設(shè)備，使用 "around" 堆疊元素嘗試一下  
元素對齊
.align-items-*-start根據(jù)不同屏幕設(shè)備，讓元素在頭部顯示在同一行。嘗試一下  
.align-items-*-center根據(jù)不同屏幕設(shè)備，讓元素在中間位置顯示在同一行。嘗試一下  
.align-items-*-stretch根據(jù)不同屏幕設(shè)備，讓元素延展高度并顯示在同一行。嘗試一下  
.align-self-*-end據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在尾部嘗試一下  
.align-self-*-baseline據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在基線位置嘗試一下  
丰满人妻一级特黄a大片，午夜无码免费福利一级，欧美亚洲精品在线，国产婷婷成人久久Av免费高清