BootStrap4工具类之flex布局

最新推荐文章于 2024-03-20 16:33:15 发布

爱喝水的qdy

最新推荐文章于 2024-03-20 16:33:15 发布

阅读量821

点赞数

分类专栏： BootStrap4 文章标签： bootstrap4 flex 工具类

本文链接：https://blog.csdn.net/qq_32617703/article/details/103402453

版权

BootStrap4 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

官方地址

https://getbootstrap.com/docs/4.4/utilities/flex/

其他文档地址

菜鸟教程
- https://www.runoob.com/bootstrap4/bootstrap4-utilities.html
https://getbootstrap.net
- https://getbootstrap.net/docs/utilities/flex/
http://bs4.vx.link
- http://bs4.vx.link/index.html?tmpui_page=/pages/utilities

认识flex

菜鸟教程
- https://www.runoob.com/css3/css3-flexbox.html

启用flex

通用flex

.d-flex
.d-inline-flex

<div class="container">
    <h1>启用flex</h1>
    <h2>d-flex</h2>

    <div class="d-flex p-2 bg-primary">I'm a flexbox container!</div>

    <hr/>

    <h2>d-inline-flex</h2>

    <div class="d-inline-flex p-2 bg-success">I'm an inline flexbox container!</div>

</div>

响应式flex

.d-{breakpoint}-{flex | 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

<div class="container">
    <h1>响应式flex</h1>
    <p>.d-flex 和 .d-inline-flex 也存在响应式设计。</p>
    <ul>
        <li><code class="">.d-flex</code></li>
        <li><code class="">.d-inline-flex</code></li>
        <li><code class="">.d-sm-flex</code></li>
        <li><code class="">.d-sm-inline-flex</code></li>
        <li><code class="">.d-md-flex</code></li>
        <li><code class="">.d-md-inline-flex</code></li>
        <li><code class="">.d-lg-flex</code></li>
        <li><code class="">.d-lg-inline-flex</code></li>
        <li><code class="">.d-xl-flex</code></li>
        <li><code class="">.d-xl-inline-flex</code></li>
    </ul>
</div>

flex布局方向

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse

水平

.flex-row
.flex-row-reverse

<h2>水平方向</h2>
<div class="d-flex flex-row bg-light mb-3">
    <div class="p-2 bg-primary">Flex item 1</div>
    <div class="p-2 bg-success">Flex item 2</div>
    <div class="p-2 bg-info">Flex item 3</div>
</div>
<hr/>
<div class="d-flex flex-row-reverse bg-light">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-success">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
</div>

垂直

.flex-column
.flex-column-reverse

<h2>垂直方向</h2>
<div class="d-flex flex-column bg-light mb-3">
    <div class="p-2 bg-warning">Flex item 1</div>
    <div class="p-2 bg-danger">Flex item 2</div>
    <div class="p-2 bg-dark">Flex item 3</div>
</div>
<hr/>
<div class="d-flex flex-column-reverse bg-light">
    <div class="p-2 bg-dark">Flex item 1</div>
    <div class="p-2 bg-danger">Flex item 2</div>
    <div class="p-2 bg-warning">Flex item 3</div>
</div>

响应式方向

.flex-{breakpoint}-{row | row-reverse | column | column-reverse}
- .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

调整内容

使用 flexbox 容器上的 justify-content 通用类别改变 flex 子元素在主轴上的对齐（从x轴开始，如果 flex-direction: column 则为 y 轴）。

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around

x轴

flex-direction: row | row-reverse

<h1>flex-direction: row</h1>
<div class="">
    <h1>justify-content-start</h1>
    <div class="d-flex justify-content-start bg-light mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-end</h1>
    <div class="d-flex justify-content-end bg-light mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-center</h1>
    <div class="d-flex justify-content-center bg-light mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-between</h1>
    <div class="d-flex justify-content-between bg-light mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-around</h1>
    <div class="d-flex justify-content-around bg-light">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

y轴

flex-direction: column | column-reverse

<h1>flex-direction: column</h1>
<div class="">
    <h1>justify-content-start</h1>
    <div class="d-flex flex-column justify-content-start bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-end</h1>
    <div class="d-flex flex-column justify-content-end bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-center</h1>
    <div class="d-flex flex-column justify-content-center bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-between</h1>
    <div class="d-flex flex-column justify-content-between bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>justify-content-around</h1>
    <div class="d-flex flex-column justify-content-around bg-light vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

justify-content响应式属性

.justify-content-{breakpoint}-{start | end | center | between | around}
- .justify-content-start
- .justify-content-end
- .justify-content-center
- .justify-content-between
- .justify-content-around
- .justify-content-sm-start
- .justify-content-sm-end
- .justify-content-sm-center
- .justify-content-sm-between
- .justify-content-sm-around
- .justify-content-md-start
- .justify-content-md-end
- .justify-content-md-center
- .justify-content-md-between
- .justify-content-md-around
- .justify-content-lg-start
- .justify-content-lg-end
- .justify-content-lg-center
- .justify-content-lg-between
- .justify-content-lg-around
- .justify-content-xl-start
- .justify-content-xl-end
- .justify-content-xl-center
- .justify-content-xl-between
- .justify-content-xl-around

对齐项目

在 flexbox 容器上使用 align-items 工具改变横轴上 flex 物件的对齐（从y 轴开始，如果 flex-direction: column 则为 x 轴）。

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

x轴

flex-direction: row | row-reverse

<div class="">
    <h1>align-items-start</h1>
    <div class="d-flex align-items-start bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-end</h1>
    <div class="d-flex align-items-end bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-center</h1>
    <div class="d-flex align-items-center bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-baseline</h1>
    <div class="d-flex align-items-baseline bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-stretch</h1>
    <div class="d-flex align-items-stretch bg-light vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

y轴

flex-direction: column | column-reverse

<h1>flex-direction: column</h1>
<div class="">
    <h1>align-items-start</h1>
    <div class="d-flex flex-column align-items-start bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-end</h1>
    <div class="d-flex flex-column align-items-end bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-center</h1>
    <div class="d-flex flex-column align-items-center bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-baseline</h1>
    <div class="d-flex flex-column align-items-baseline bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-stretch</h1>
    <div class="d-flex flex-column align-content-stretch bg-light vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

align-items的响应式属性

.align-items-{breakpoint}-{start | end | center | baseline | stretch}
- .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

自身对齐

使用 flexbox 物件上的 align-self 通用类别单独改变在横轴上的对齐（从y 轴开始，如果 flex-direction: column 则为 x 轴）。

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch

x轴

.flex-direction: row | row-reverse

<h1>flex-direction: row</h1>
<div class="">
    <h1>align-self-start</h1>
    <div class="d-flex bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-start ">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-end</h1>
    <div class="d-flex bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-end">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-center</h1>
    <div class="d-flex bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-center">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-baseline</h1>
    <div class="d-flex bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-baseline">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-items-stretch</h1>
    <div class="d-flex bg-light vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-items-stretch">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

y轴

flex-direction: column | column-reverse

<h1>flex-direction: column</h1>
<div class="">
    <h1>align-self-start</h1>
    <div class="d-flex flex-column bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-start">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-end</h1>
    <div class="d-flex flex-column bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-end">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-center</h1>
    <div class="d-flex flex-column bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-center">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-baseline</h1>
    <div class="d-flex flex-column bg-light mb-3 vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-baseline">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
    <h1>align-self-stretch</h1>
    <div class="d-flex flex-column bg-light vh-100">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success align-self-stretch">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
    </div>
</div>

align-self的响应式属性

.align-self-{breakpoint}-{start | end | center | baseline | stretch}
- .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

换行

默认情况下，flex的子元素是在一行上显示的。可设置以下的值：

.flex-nowrap (默认)
.flex-wrap
.flex-wrap-reverse

不换行

默认就是 or flex-nowrap类

<div class="">
    <div class="d-flex flex-nowrap bg-dark p-2" style="width: 200px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
    </div>
</div>

换行

.flex-wrap类

<div class="">
    <div class="d-flex flex-wrap bg-dark p-2" style="width: 200px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
    </div>
</div>

换行反转

.flex-wrap-reverse

<h1>.flex-wrap-reverse</h1>
<div class="">
   <div class="d-flex flex-wrap-reverse bg-dark p-2" style="width: 200px;">
       <div class="p-2 bg-primary">Flex item</div>
       <div class="p-2 bg-secondary">Flex item</div>
       <div class="p-2 bg-success">Flex item</div>
       <div class="p-2 bg-info">Flex item</div>
       <div class="p-2 bg-warning">Flex item</div>
   </div>
</div>

flex-wrap的响应式属性

.flex-{breakpoint}-{nowrap | wrap | wrap-reverse}
- .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

对齐内容

使用 flexbox 容器上的 align-content 工具将 flex 物件于横轴上一起对齐。
为了呈现这通用类别的效果，我们加入了 flex-wrap: wrap 及增加了flex项的数量。

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch

x轴

flex-direction: row | row-reverse

<h1>flex-direction: row</h1>
<div class="">
    <h2>align-content-start</h2>
    <div class="d-flex align-content-start flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-end</h2>
    <div class="d-flex align-content-end flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-center</h2>
    <div class="d-flex align-content-center flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-between</h2>
    <div class="d-flex align-content-between flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-around</h2>
    <div class="d-flex align-content-around flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-stretch</h2>
    <div class="d-flex align-content-stretch flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>
</div>

y轴

flex-direction: column | column-reverse

<h1>flex-direction: column</h1>
<div class="">
    <h2>align-content-start</h2>
    <div class="d-flex align-content-start flex-column flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-end</h2>
    <div class="d-flex align-content-end flex-column flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-center</h2>
    <div class="d-flex align-content-center flex-column flex-wrap bg-dark mb-3"
         style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-between</h2>
    <div class="d-flex align-content-between flex-column flex-wrap bg-dark mb-3"
         style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-around</h2>
    <div class="d-flex align-content-around flex-column flex-wrap bg-dark mb-3"
         style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <h2>align-content-stretch</h2>
    <div class="d-flex align-content-stretch flex-column flex-wrap bg-dark mb-3"
         style="height: 200px; width: 600px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-white">Flex item</div>
        <div class="p-2 bg-light">Flex item</div>
        <div class="p-2 bg-danger">Flex item</div>
        <div class="p-2 bg-warning">Flex item</div>
        <div class="p-2 bg-info">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
    </div>

    <hr/>

    <h1>
        <code>align-content</code> 也包含响应式设计
    </h1>
    <p>
        <code>.align-content-{breakpoint}-{start | end | center | between | around | stretch}</code>
    </p>
    <ul>
        <li><code class="">.align-content-start</code></li>
        <li><code class="">.align-content-end</code></li>
        <li><code class="">.align-content-center</code></li>
        <li><code class="">.align-content-around</code></li>
        <li><code class="">.align-content-stretch</code></li>
        <li><code class="">.align-content-sm-start</code></li>
        <li><code class="">.align-content-sm-end</code></li>
        <li><code class="">.align-content-sm-center</code></li>
        <li><code class="">.align-content-sm-around</code></li>
        <li><code class="">.align-content-sm-stretch</code></li>
        <li><code class="">.align-content-md-start</code></li>
        <li><code class="">.align-content-md-end</code></li>
        <li><code class="">.align-content-md-center</code></li>
        <li><code class="">.align-content-md-around</code></li>
        <li><code class="">.align-content-md-stretch</code></li>
        <li><code class="">.align-content-lg-start</code></li>
        <li><code class="">.align-content-lg-end</code></li>
        <li><code class="">.align-content-lg-center</code></li>
        <li><code class="">.align-content-lg-around</code></li>
        <li><code class="">.align-content-lg-stretch</code></li>
        <li><code class="">.align-content-xl-start</code></li>
        <li><code class="">.align-content-xl-end</code></li>
        <li><code class="">.align-content-xl-center</code></li>
        <li><code class="">.align-content-xl-around</code></li>
        <li><code class="">.align-content-xl-stretch</code></li>
    </ul>
</div>

填满

.flex-fill 占用剩下所有可用的水平空间。
在相邻元素上使用 .flex-fill 来强制它们在相同的宽度上分配所有可用的水平空间。对于等宽导览特别有用。

.flex-fill 内部：flex: 1 1 auto;

flex-fill

<div class="d-flex bg-dark">
    <div class="p-2 flex-fill bg-primary">Flex item</div>
    <div class="p-2 flex-fill bg-success">Flex item</div>
    <div class="p-2 flex-fill bg-info">Flex item</div>
</div>

flex-fill的响应式属性

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

伸缩值

.flex-grow-*
.flex-shrink-*

不清楚flex-grow和flex-shrink属性，可以参考：

https://blog.csdn.net/m0_37058714/article/details/80765562

flex-grow-*

使用 .flex-grow-* 通用类别来切换项目弹性增长以填充可用空间。

在下面的范例中， .flex-grow-1 元素使用它可以使用的所有可用空间，同时允许剩余的两个 flex 物件保留必要的空间。

<div class="d-flex bg-dark p-2">
    <div class="p-2 flex-grow-1 bg-primary">Flex item</div>
    <div class="p-2 bg-secondary">Flex item</div>
    <div class="p-2 bg-success">Third flex item</div>
</div>

flex-shrink-*

使用 .flex-shrink-* 工具来切换调整项目的尺寸。

在下面的示例中，第二个带有 .flex-shrink-1 的弹性项目被强制将其内容包装到一个新行，“收缩”以允许更多空间用于上一个具有 .w-100 的弹性项目。

<div class="d-flex bg-dark p-2">
    <div class="p-2 w-100 bg-primary">Flex item</div>
    <div class="p-2 flex-shrink-1 bg-success">Flex item</div>
</div>

flex-grow与flex-shrink的响应式属性

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 对齐与auto margin 混在一起的时候，flexbox 也能正常的运行。

下面的范例是通过margin的auto来控制 flex子元素的八(官方3个 + 自行5个)个案例，以供参考：

预设（无 margin）
向右推两个项目（.mr-auto）
向左推两个项目（.ml-auto)
向下推两个项目(.mb-auto)
向上推两个项目(.mt-auto)
水平居中(.mx-auto)
垂直居中(.my-auto)
水平垂直居中(.m-auto)

预设(无margin)

<div class="d-flex bg-dark mb-3">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-secondary">Flex item</div>
    <div class="p-2 bg-success">Flex item</div>
</div>

向右推两个项目(.mr-auto)

<div class="d-flex bg-dark mb-3">
    <div class="mr-auto p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-secondary">Flex item</div>
    <div class="p-2 bg-success">Flex item</div>
</div>

向左推两个项目(.ml-auto)

<div class="d-flex bg-dark mb-3">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-secondary">Flex item</div>
    <div class="ml-auto p-2 bg-success">Flex item</div>
</div>

向下推两个项目(.mb-auto)

<div class="d-flex bg-dark mb-3">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 mx-auto bg-secondary">Flex item</div>
    <div class="p-2 bg-success">Flex item</div>
</div>

向上推两个项目(.mt-auto)

<div class="d-flex align-items-start flex-column bg-dark mb-3" style="height: 200px;">
    <div class="mb-auto p-2 bg-secondary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-success">Flex item</div>
</div>

水平居中(.mx-auto)

<div class="d-flex align-items-end flex-column bg-dark mb-3" style="height: 200px;">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-success">Flex item</div>
    <div class="mt-auto p-2 bg-secondary">Flex item</div>
</div>

垂直居中(.my-auto)

<div class="d-flex bg-dark mb-3" style="height: 400px;">
       <div class="p-2 bg-primary">Flex item</div>
       <div class="p-2 my-auto bg-secondary">Flex item</div>
       <div class="p-2 bg-success">Flex item</div>
</div>

水平垂直居中(.m-auto)

<div class="d-flex bg-dark mb-3" style="height: 400px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 m-auto bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
</div>

排序

使用 order 通用类别改变特定 flex物件的显示排序。

order 只能使用整数值（例如，5），范围( 0 - 12 )

order

 <div class="d-flex flex-nowrap bg-dark">
     <div class="order-last p-2 bg-primary">Order-Last flex item: 13</div>
     <div class="order-2 p-2 bg-success">Second flex item</div>
     <div class="order-1 p-2 bg-secondary">Third flex item</div>
     <div class="order-first p-2 bg-secondary">Order-First flex item: -1</div>
     <div class="order-0 p-2 bg-secondary">Third flex item</div>
     <div class="order-md-first p-2 bg-secondary">order-md-first Third flex item</div>
 </div>

order的响应式属性

.order-first ==> 内部为：order: -1
.order-last ==> 内部为：order: 13
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-first
.order-sm-1ast
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-first
.order-md-1ast
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-first
.order-lg-1ast
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-first
.order-xl-1ast
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>15flex布局</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">

</pre>

<div class="container">
    <h1>启用flex</h1>
    <h2>d-flex</h2>

    <div class="d-flex p-2 bg-primary">I'm a flexbox container!</div>

    <hr/>

    <h2>d-inline-flex</h2>

    <div class="d-inline-flex p-2 bg-success">I'm an inline flexbox container!</div>

</div>

<hr/>

<div class="container">
    <h1>响应式flex</h1>
    <p>.d-flex 和 .d-inline-flex 也存在响应式设计。</p>
    <ul>
        <li><code class="">.d-flex</code></li>
        <li><code class="">.d-inline-flex</code></li>
        <li><code class="">.d-sm-flex</code></li>
        <li><code class="">.d-sm-inline-flex</code></li>
        <li><code class="">.d-md-flex</code></li>
        <li><code class="">.d-md-inline-flex</code></li>
        <li><code class="">.d-lg-flex</code></li>
        <li><code class="">.d-lg-inline-flex</code></li>
        <li><code class="">.d-xl-flex</code></li>
        <li><code class="">.d-xl-inline-flex</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1>方向</h1>
    <pre>
        .flex-row
        .flex-row-reverse
        .flex-column
        .flex-column-reverse
    </pre>
    <hr/>
    <h2>水平方向</h2>
    <div class="d-flex flex-row bg-light mb-3">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-success">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <hr/>
    <div class="d-flex flex-row-reverse bg-light">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-success">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <hr/>
    <h2>垂直方向</h2>
    <div class="d-flex flex-column bg-light mb-3">
        <div class="p-2 bg-warning">Flex item 1</div>
        <div class="p-2 bg-danger">Flex item 2</div>
        <div class="p-2 bg-dark">Flex item 3</div>
    </div>
    <hr/>
    <div class="d-flex flex-column-reverse bg-light">
        <div class="p-2 bg-dark">Flex item 1</div>
        <div class="p-2 bg-danger">Flex item 2</div>
        <div class="p-2 bg-warning">Flex item 3</div>
    </div>

    <hr/>
    <h2>响应式方向</h2>
    <p>
        <code>.flex-{breakpoint}-{row | row-reverse | column | column-reverse}</code>
    </p>
    <ul>
        <li><code class="">.flex-row</code></li>
        <li><code class="">.flex-row-reverse</code></li>
        <li><code class="">.flex-column</code></li>
        <li><code class="">.flex-column-reverse</code></li>
        <li><code class="">.flex-sm-row</code></li>
        <li><code class="">.flex-sm-row-reverse</code></li>
        <li><code class="">.flex-sm-column</code></li>
        <li><code class="">.flex-sm-column-reverse</code></li>
        <li><code class="">.flex-md-row</code></li>
        <li><code class="">.flex-md-row-reverse</code></li>
        <li><code class="">.flex-md-column</code></li>
        <li><code class="">.flex-md-column-reverse</code></li>
        <li><code class="">.flex-lg-row</code></li>
        <li><code class="">.flex-lg-row-reverse</code></li>
        <li><code class="">.flex-lg-column</code></li>
        <li><code class="">.flex-lg-column-reverse</code></li>
        <li><code class="">.flex-xl-row</code></li>
        <li><code class="">.flex-xl-row-reverse</code></li>
        <li><code class="">.flex-xl-column</code></li>
        <li><code class="">.flex-xl-column-reverse</code></li>
    </ul>
</div>

<hr/>
<div class="container">
    <h1>调整内容</h1>
    <p>
        使用 <code>flexbox</code> 容器上的 <code>justify-content</code> 通用类别改变 flex 物件在主轴上的对齐
        （x轴开始，如果 <code>flex-direction: column</code> 则为 y 轴）。
    </p>
    <ul>
        <li>
            <code>.justify-content-start</code>
        </li>

        <li>
            <code>.justify-content-end</code>
        </li>

        <li>
            <code>.justify-content-center</code>
        </li>

        <li>
            <code>.justify-content-between</code>
        </li>

        <li>
            <code>.justify-content-around</code>
        </li>
    </ul>
    <hr/>
    <h1>flex-direction: row</h1>
    <div class="">
        <h1>justify-content-start</h1>
        <div class="d-flex justify-content-start bg-light mb-3">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-end</h1>
        <div class="d-flex justify-content-end bg-light mb-3">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-center</h1>
        <div class="d-flex justify-content-center bg-light mb-3">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-between</h1>
        <div class="d-flex justify-content-between bg-light mb-3">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-around</h1>
        <div class="d-flex justify-content-around bg-light">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>

    <hr/>

    <h1>flex-direction: column</h1>
    <div class="">
        <h1>justify-content-start</h1>
        <div class="d-flex flex-column justify-content-start bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-end</h1>
        <div class="d-flex flex-column justify-content-end bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-center</h1>
        <div class="d-flex flex-column justify-content-center bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-between</h1>
        <div class="d-flex flex-column justify-content-between bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>justify-content-around</h1>
        <div class="d-flex flex-column justify-content-around bg-light vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>
    <hr/>

    <h2>
        <code>justify-content</code> 的响应式属性
    </h2>
    <h2>
        <code>.justify-content-{breakpoint}-{start | end | center | between | around}</code>
    </h2>
    <ul>
        <li><code class="">.justify-content-start</code></li>
        <li><code class="">.justify-content-end</code></li>
        <li><code class="">.justify-content-center</code></li>
        <li><code class="">.justify-content-between</code></li>
        <li><code class="">.justify-content-around</code></li>
        <li><code class="">.justify-content-sm-start</code></li>
        <li><code class="">.justify-content-sm-end</code></li>
        <li><code class="">.justify-content-sm-center</code></li>
        <li><code class="">.justify-content-sm-between</code></li>
        <li><code class="">.justify-content-sm-around</code></li>
        <li><code class="">.justify-content-md-start</code></li>
        <li><code class="">.justify-content-md-end</code></li>
        <li><code class="">.justify-content-md-center</code></li>
        <li><code class="">.justify-content-md-between</code></li>
        <li><code class="">.justify-content-md-around</code></li>
        <li><code class="">.justify-content-lg-start</code></li>
        <li><code class="">.justify-content-lg-end</code></li>
        <li><code class="">.justify-content-lg-center</code></li>
        <li><code class="">.justify-content-lg-between</code></li>
        <li><code class="">.justify-content-lg-around</code></li>
        <li><code class="">.justify-content-xl-start</code></li>
        <li><code class="">.justify-content-xl-end</code></li>
        <li><code class="">.justify-content-xl-center</code></li>
        <li><code class="">.justify-content-xl-between</code></li>
        <li><code class="">.justify-content-xl-around</code></li>
    </ul>
</div>

<div class="container">
    <h1>对齐项目</h1>
    <p>
        在 <code>flexbox</code> 容器上使用 <code>align-items</code> 工具改变横轴上 flex 物件的对齐
        （y 轴开始，如果 <code>flex-direction: column</code> 则为 x 轴）。
    </p>

    <h1>flex-direction: row</h1>
    <div class="">
        <h1>align-items-start</h1>
        <div class="d-flex align-items-start bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-end</h1>
        <div class="d-flex align-items-end bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-center</h1>
        <div class="d-flex align-items-center bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-baseline</h1>
        <div class="d-flex align-items-baseline bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-stretch</h1>
        <div class="d-flex align-items-stretch bg-light vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>

    <hr/>


    <h1>flex-direction: column</h1>
    <div class="">
        <h1>align-items-start</h1>
        <div class="d-flex flex-column align-items-start bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-end</h1>
        <div class="d-flex flex-column align-items-end bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-center</h1>
        <div class="d-flex flex-column align-items-center bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-baseline</h1>
        <div class="d-flex flex-column align-items-baseline bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-stretch</h1>
        <div class="d-flex flex-column align-content-stretch bg-light vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>

    <hr/>

    <h2>
        <code>align-items</code> 的响应式属性
    </h2>
    <h2>
        <code>.align-items-{breakpoint}-{start | end | center | baseline | stretch}</code>
    </h2>
    <ul>
        <li><code class="">.align-items-start</code></li>
        <li><code class="">.align-items-end</code></li>
        <li><code class="">.align-items-center</code></li>
        <li><code class="">.align-items-baseline</code></li>
        <li><code class="">.align-items-stretch</code></li>
        <li><code class="">.align-items-sm-start</code></li>
        <li><code class="">.align-items-sm-end</code></li>
        <li><code class="">.align-items-sm-center</code></li>
        <li><code class="">.align-items-sm-baseline</code></li>
        <li><code class="">.align-items-sm-stretch</code></li>
        <li><code class="">.align-items-md-start</code></li>
        <li><code class="">.align-items-md-end</code></li>
        <li><code class="">.align-items-md-center</code></li>
        <li><code class="">.align-items-md-baseline</code></li>
        <li><code class="">.align-items-md-stretch</code></li>
        <li><code class="">.align-items-lg-start</code></li>
        <li><code class="">.align-items-lg-end</code></li>
        <li><code class="">.align-items-lg-center</code></li>
        <li><code class="">.align-items-lg-baseline</code></li>
        <li><code class="">.align-items-lg-stretch</code></li>
        <li><code class="">.align-items-xl-start</code></li>
        <li><code class="">.align-items-xl-end</code></li>
        <li><code class="">.align-items-xl-center</code></li>
        <li><code class="">.align-items-xl-baseline</code></li>
        <li><code class="">.align-items-xl-stretch</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1>自身对齐</h1>
    <p>
        使用 <code>flexbox</code> 物件上的 <code>align-self</code> 通用类别单独改变在横轴上的对齐
        （y 轴开始，如果 <code>flex-direction: column</code> 则为 x 轴）。
    </p>

    <h1>flex-direction: row</h1>
    <div class="">
        <h1>align-self-start</h1>
        <div class="d-flex bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-start ">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-end</h1>
        <div class="d-flex bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-end">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-center</h1>
        <div class="d-flex bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-center">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-baseline</h1>
        <div class="d-flex bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-baseline">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-items-stretch</h1>
        <div class="d-flex bg-light vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-items-stretch">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>

    <hr/>


    <h1>flex-direction: column</h1>
    <div class="">
        <h1>align-self-start</h1>
        <div class="d-flex flex-column bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-start">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-end</h1>
        <div class="d-flex flex-column bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-end">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-center</h1>
        <div class="d-flex flex-column bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-center">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-baseline</h1>
        <div class="d-flex flex-column bg-light mb-3 vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-baseline">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
        <h1>align-self-stretch</h1>
        <div class="d-flex flex-column bg-light vh-100">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-success align-self-stretch">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
        </div>
    </div>

    <hr/>

    <h2>
        <code>align-self</code> 的响应式属性
    </h2>
    <h2>
        <code>.align-self-{breakpoint}-{start | end | center | baseline | stretch}</code>
    </h2>
    <ul>
        <li><code class="">.align-self-start</code></li>
        <li><code class="">.align-self-end</code></li>
        <li><code class="">.align-self-center</code></li>
        <li><code class="">.align-self-baseline</code></li>
        <li><code class="">.align-self-stretch</code></li>
        <li><code class="">.align-self-sm-start</code></li>
        <li><code class="">.align-self-sm-end</code></li>
        <li><code class="">.align-self-sm-center</code></li>
        <li><code class="">.align-self-sm-baseline</code></li>
        <li><code class="">.align-self-sm-stretch</code></li>
        <li><code class="">.align-self-md-start</code></li>
        <li><code class="">.align-self-md-end</code></li>
        <li><code class="">.align-self-md-center</code></li>
        <li><code class="">.align-self-md-baseline</code></li>
        <li><code class="">.align-self-md-stretch</code></li>
        <li><code class="">.align-self-lg-start</code></li>
        <li><code class="">.align-self-lg-end</code></li>
        <li><code class="">.align-self-lg-center</code></li>
        <li><code class="">.align-self-lg-baseline</code></li>
        <li><code class="">.align-self-lg-stretch</code></li>
        <li><code class="">.align-self-xl-start</code></li>
        <li><code class="">.align-self-xl-end</code></li>
        <li><code class="">.align-self-xl-center</code></li>
        <li><code class="">.align-self-xl-baseline</code></li>
        <li><code class="">.align-self-xl-stretch</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1>Wrap换行</h1>
    <p>默认情况下，flex的元素是在一行上显示的。可设置以下的值：</p>
    <ul>
        <li>
            <code>.flex-nowrap (默认)</code>
        </li>

        <li>
            <code>.flex-wrap</code>
        </li>

        <li>
            <code>.flex-wrap-reverse</code>
        </li>
    </ul>
    <div class="">
        <div class="d-flex flex-nowrap bg-dark p-2" style="width: 200px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
        </div>
    </div>

    <hr/>

    <h1>.flex-wrap</h1>
    <div class="">
        <div class="d-flex flex-wrap bg-dark p-2" style="width: 200px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
        </div>
    </div>

    <hr/>

    <h1>.flex-wrap-reverse</h1>
    <div class="">
        <div class="d-flex flex-wrap-reverse bg-dark p-2" style="width: 200px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
        </div>
    </div>

    <hr/>

    <h1>
        <code>flex-wrap</code> 也包含响应式属性
    </h1>
    <ul>
        <li><code class="">.flex-nowrap</code></li>
        <li><code class="">.flex-wrap</code></li>
        <li><code class="">.flex-wrap-reverse</code></li>
        <li><code class="">.flex-sm-nowrap</code></li>
        <li><code class="">.flex-sm-wrap</code></li>
        <li><code class="">.flex-sm-wrap-reverse</code></li>
        <li><code class="">.flex-md-nowrap</code></li>
        <li><code class="">.flex-md-wrap</code></li>
        <li><code class="">.flex-md-wrap-reverse</code></li>
        <li><code class="">.flex-lg-nowrap</code></li>
        <li><code class="">.flex-lg-wrap</code></li>
        <li><code class="">.flex-lg-wrap-reverse</code></li>
        <li><code class="">.flex-xl-nowrap</code></li>
        <li><code class="">.flex-xl-wrap</code></li>
        <li><code class="">.flex-xl-wrap-reverse</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1>对齐内容</h1>
    <p>
        使用 <code>flexbox</code> 容器上的 <code>align-content</code> 工具将 flex 物件于横轴上一起对齐。
        为了呈现这通用类别的效果，我们加入了 flex-wrap: wrap 及增加了flex项的数量。
    </p>
    <ul>
        <li>
            <code>.align-content-start</code>
        </li>
        <li>
            <code>.align-content-end</code>
        </li>
        <li>
            <code>.align-content-center</code>
        </li>
        <li>
            <code>.align-content-between</code>
        </li>
        <li>
            <code>.align-content-around</code>
        </li>
        <li>
            <code>.align-content-stretch</code>
        </li>
    </ul>
    <hr/>

    <h1>flex-direction: row</h1>
    <div class="">
        <h2>align-content-start</h2>
        <div class="d-flex align-content-start flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-end</h2>
        <div class="d-flex align-content-end flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-center</h2>
        <div class="d-flex align-content-center flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-between</h2>
        <div class="d-flex align-content-between flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-around</h2>
        <div class="d-flex align-content-around flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-stretch</h2>
        <div class="d-flex align-content-stretch flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>
    </div>

    <hr/>

    <h1>flex-direction: column</h1>
    <div class="">
        <h2>align-content-start</h2>
        <div class="d-flex align-content-start flex-column flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-end</h2>
        <div class="d-flex align-content-end flex-column flex-wrap bg-dark mb-3" style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-center</h2>
        <div class="d-flex align-content-center flex-column flex-wrap bg-dark mb-3"
             style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-between</h2>
        <div class="d-flex align-content-between flex-column flex-wrap bg-dark mb-3"
             style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-around</h2>
        <div class="d-flex align-content-around flex-column flex-wrap bg-dark mb-3"
             style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <h2>align-content-stretch</h2>
        <div class="d-flex align-content-stretch flex-column flex-wrap bg-dark mb-3"
             style="height: 200px; width: 600px;">
            <div class="p-2 bg-primary">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-white">Flex item</div>
            <div class="p-2 bg-light">Flex item</div>
            <div class="p-2 bg-danger">Flex item</div>
            <div class="p-2 bg-warning">Flex item</div>
            <div class="p-2 bg-info">Flex item</div>
            <div class="p-2 bg-success">Flex item</div>
            <div class="p-2 bg-secondary">Flex item</div>
            <div class="p-2 bg-primary">Flex item</div>
        </div>

        <hr/>

        <h1>
            <code>align-content</code> 也包含响应式设计
        </h1>
        <p>
            <code>.align-content-{breakpoint}-{start | end | center | between | around | stretch}</code>
        </p>
        <ul>
            <li><code class="">.align-content-start</code></li>
            <li><code class="">.align-content-end</code></li>
            <li><code class="">.align-content-center</code></li>
            <li><code class="">.align-content-around</code></li>
            <li><code class="">.align-content-stretch</code></li>
            <li><code class="">.align-content-sm-start</code></li>
            <li><code class="">.align-content-sm-end</code></li>
            <li><code class="">.align-content-sm-center</code></li>
            <li><code class="">.align-content-sm-around</code></li>
            <li><code class="">.align-content-sm-stretch</code></li>
            <li><code class="">.align-content-md-start</code></li>
            <li><code class="">.align-content-md-end</code></li>
            <li><code class="">.align-content-md-center</code></li>
            <li><code class="">.align-content-md-around</code></li>
            <li><code class="">.align-content-md-stretch</code></li>
            <li><code class="">.align-content-lg-start</code></li>
            <li><code class="">.align-content-lg-end</code></li>
            <li><code class="">.align-content-lg-center</code></li>
            <li><code class="">.align-content-lg-around</code></li>
            <li><code class="">.align-content-lg-stretch</code></li>
            <li><code class="">.align-content-xl-start</code></li>
            <li><code class="">.align-content-xl-end</code></li>
            <li><code class="">.align-content-xl-center</code></li>
            <li><code class="">.align-content-xl-around</code></li>
            <li><code class="">.align-content-xl-stretch</code></li>
        </ul>
    </div>
</div>

<hr/>

<div class="container">
    <h1>填满</h1>
    <p>
        <code>.flex-fill</code> 占用剩下所有可用的水平空间。
    </p>
    <p>
        在相邻元素上使用 <code>.flex-fill</code> 来强制它们在相同的宽度上分配所有可用的水平空间。对于等宽导览特别有用。
    </p>
    <div class="d-flex bg-dark">
        <div class="p-2 flex-fill bg-primary">Flex item</div>
        <div class="p-2 flex-fill bg-success">Flex item</div>
        <div class="p-2 flex-fill bg-info">Flex item</div>
    </div>

    <hr/>

    <h2>
        <code>flex-fill</code>
        同样包含响应式的组合
    </h2>
    <ul>
        <li><code class="">.flex-fill</code></li>
        <li><code class="">.flex-sm-fill</code></li>
        <li><code class="">.flex-md-fill</code></li>
        <li><code class="">.flex-lg-fill</code></li>
        <li><code class="">.flex-xl-fill</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1 class="display-3">
        不清楚flex-grow和flex-shrink属性，参考
        <a href="https://blog.csdn.net/m0_37058714/article/details/80765562" class="text-decoration-none">
            https://blog.csdn.net/m0_37058714/article/details/80765562
        </a>
    </h1>
    <h1>伸缩值</h1>
    <p>
        使用 <code> .flex-grow-* </code>通用类别来切换项目弹性增长以填充可用空间。
    </p>

    <p>
        在下面的范例中， <code>.flex-grow-1</code> 元素使用它可以使用的所有可用空间，同时允许剩余的两个 flex 物件保留必要的空间。
    </p>
    <div class="d-flex bg-dark p-2">
        <div class="p-2 flex-grow-1 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Third flex item</div>
    </div>

    <hr/>
    <p>
        使用 <code>.flex-shrink-*</code> 工具来切换调整项目的尺寸
    </p>

    <p>
        在下面的示例中，第二个带有 .flex-shrink-1 的弹性项目被强制将其内容包装到一个新行，“收缩”以允许更多空间用于上一个具有 .w-100 的弹性项目。
    </p>
    <div class="d-flex bg-dark p-2">
        <div class="p-2 w-100 bg-primary">Flex item</div>
        <div class="p-2 flex-shrink-1 bg-success">Flex item</div>
    </div>

    <hr/>
    <h1>
        <code>flex-grow</code> 和 <code>flex-shrink</code> 也具备响应式设计。
    </h1>
    <ul>
        <li><code class="highlighter-rouge">.flex-{grow|shrink}-0</code></li>
        <li><code class="highlighter-rouge">.flex-{grow|shrink}-1</code></li>
        <li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
        <li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
        <li><code class="highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
        <li><code class="highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
        <li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
        <li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
        <li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
        <li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
    </ul>
</div>

<hr/>

<div class="container">
    <h1>自动的边距</h1>
    <p>
        当你将 flex 对齐与 auto margin 混在一起的时候，flexbox 也能正常的运行。
        下面的范例是透过自动 margin 来控制 flex 物件的五个案例：
        预设（无 margin），
        向右推两个项目（.mr-auto），
        向左推两个项目（.ml-auto)
        向下推两个项目(.mb-auto)
        向上推两个项目(.mt-auto)
        水平居中(.mx-auto)
        垂直居中(.my-auto)
        水平垂直居中(.m-auto)
    </p>
    <div class="d-flex bg-dark mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex bg-dark mb-3">
        <div class="mr-auto p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex bg-dark mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-secondary">Flex item</div>
        <div class="ml-auto p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex bg-dark mb-3">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 mx-auto bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex align-items-start flex-column bg-dark mb-3" style="height: 200px;">
        <div class="mb-auto p-2 bg-secondary">Flex item</div>
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex align-items-end flex-column bg-dark mb-3" style="height: 200px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
        <div class="mt-auto p-2 bg-secondary">Flex item</div>
    </div>

    <div class="d-flex bg-dark mb-3" style="height: 400px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 my-auto bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>

    <div class="d-flex bg-dark mb-3" style="height: 400px;">
        <div class="p-2 bg-primary">Flex item</div>
        <div class="p-2 m-auto bg-secondary">Flex item</div>
        <div class="p-2 bg-success">Flex item</div>
    </div>
</div>

<hr/>

<div class="container">
    <h1>排序</h1>
    <div class="d-flex flex-nowrap bg-dark">
        <div class="order-last p-2 bg-primary">Order-Last flex item: 13</div>
        <div class="order-2 p-2 bg-success">Second flex item</div>
        <div class="order-1 p-2 bg-secondary">Third flex item</div>
        <div class="order-first p-2 bg-secondary">Order-First flex item: -1</div>
        <div class="order-0 p-2 bg-secondary">Third flex item</div>
        <div class="order-md-first p-2 bg-secondary">order-md-first Third flex item</div>
    </div>

    <h1>
        <code>order也有响应式设计</code>
    </h1>
    <ul>
        <li><code>.order-first ==> 内部为：order: -1</code></li>
        <li><code>.order-last ==> 内部为：order: 13</code></li>
        <li><code class="highlighter-rouge">.order-0</code></li>
        <li><code class="highlighter-rouge">.order-1</code></li>
        <li><code class="highlighter-rouge">.order-2</code></li>
        <li><code class="highlighter-rouge">.order-3</code></li>
        <li><code class="highlighter-rouge">.order-4</code></li>
        <li><code class="highlighter-rouge">.order-5</code></li>
        <li><code class="highlighter-rouge">.order-6</code></li>
        <li><code class="highlighter-rouge">.order-7</code></li>
        <li><code class="highlighter-rouge">.order-8</code></li>
        <li><code class="highlighter-rouge">.order-9</code></li>
        <li><code class="highlighter-rouge">.order-10</code></li>
        <li><code class="highlighter-rouge">.order-11</code></li>
        <li><code class="highlighter-rouge">.order-12</code></li>
        <li><code class="highlighter-rouge">.order-sm-first</code></li>
        <li><code class="highlighter-rouge">.order-sm-1ast</code></li>
        <li><code class="highlighter-rouge">.order-sm-0</code></li>
        <li><code class="highlighter-rouge">.order-sm-1</code></li>
        <li><code class="highlighter-rouge">.order-sm-2</code></li>
        <li><code class="highlighter-rouge">.order-sm-3</code></li>
        <li><code class="highlighter-rouge">.order-sm-4</code></li>
        <li><code class="highlighter-rouge">.order-sm-5</code></li>
        <li><code class="highlighter-rouge">.order-sm-6</code></li>
        <li><code class="highlighter-rouge">.order-sm-7</code></li>
        <li><code class="highlighter-rouge">.order-sm-8</code></li>
        <li><code class="highlighter-rouge">.order-sm-9</code></li>
        <li><code class="highlighter-rouge">.order-sm-10</code></li>
        <li><code class="highlighter-rouge">.order-sm-11</code></li>
        <li><code class="highlighter-rouge">.order-sm-12</code></li>
        <li><code class="highlighter-rouge">.order-md-first</code></li>
        <li><code class="highlighter-rouge">.order-md-1ast</code></li>
        <li><code class="highlighter-rouge">.order-md-0</code></li>
        <li><code class="highlighter-rouge">.order-md-1</code></li>
        <li><code class="highlighter-rouge">.order-md-2</code></li>
        <li><code class="highlighter-rouge">.order-md-3</code></li>
        <li><code class="highlighter-rouge">.order-md-4</code></li>
        <li><code class="highlighter-rouge">.order-md-5</code></li>
        <li><code class="highlighter-rouge">.order-md-6</code></li>
        <li><code class="highlighter-rouge">.order-md-7</code></li>
        <li><code class="highlighter-rouge">.order-md-8</code></li>
        <li><code class="highlighter-rouge">.order-md-9</code></li>
        <li><code class="highlighter-rouge">.order-md-10</code></li>
        <li><code class="highlighter-rouge">.order-md-11</code></li>
        <li><code class="highlighter-rouge">.order-md-12</code></li>
        <li><code class="highlighter-rouge">.order-lg-first</code></li>
        <li><code class="highlighter-rouge">.order-lg-1ast</code></li>
        <li><code class="highlighter-rouge">.order-lg-0</code></li>
        <li><code class="highlighter-rouge">.order-lg-1</code></li>
        <li><code class="highlighter-rouge">.order-lg-2</code></li>
        <li><code class="highlighter-rouge">.order-lg-3</code></li>
        <li><code class="highlighter-rouge">.order-lg-4</code></li>
        <li><code class="highlighter-rouge">.order-lg-5</code></li>
        <li><code class="highlighter-rouge">.order-lg-6</code></li>
        <li><code class="highlighter-rouge">.order-lg-7</code></li>
        <li><code class="highlighter-rouge">.order-lg-8</code></li>
        <li><code class="highlighter-rouge">.order-lg-9</code></li>
        <li><code class="highlighter-rouge">.order-lg-10</code></li>
        <li><code class="highlighter-rouge">.order-lg-11</code></li>
        <li><code class="highlighter-rouge">.order-lg-12</code></li>
        <li><code class="highlighter-rouge">.order-xl-first</code></li>
        <li><code class="highlighter-rouge">.order-xl-1ast</code></li>
        <li><code class="highlighter-rouge">.order-xl-0</code></li>
        <li><code class="highlighter-rouge">.order-xl-1</code></li>
        <li><code class="highlighter-rouge">.order-xl-2</code></li>
        <li><code class="highlighter-rouge">.order-xl-3</code></li>
        <li><code class="highlighter-rouge">.order-xl-4</code></li>
        <li><code class="highlighter-rouge">.order-xl-5</code></li>
        <li><code class="highlighter-rouge">.order-xl-6</code></li>
        <li><code class="highlighter-rouge">.order-xl-7</code></li>
        <li><code class="highlighter-rouge">.order-xl-8</code></li>
        <li><code class="highlighter-rouge">.order-xl-9</code></li>
        <li><code class="highlighter-rouge">.order-xl-10</code></li>
        <li><code class="highlighter-rouge">.order-xl-11</code></li>
        <li><code class="highlighter-rouge">.order-xl-12</code></li>
    </ul>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

爱喝水的qdy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BootStrap4工具类之flex布局

目录官方地址其他文档地址认识flex启用flex通用flex响应式flexflex布局方向水平垂直响应式方向调整内容x轴y轴justify-content响应式属性对齐项目x轴y轴align-items的响应式属性自身对齐x轴y轴align-self的响应式属性换行不换行换行换行反转flex-wrap的响应式属性对齐内容x轴y轴填满flex-fillflex-fill的响应式属性伸缩值flex-g...
复制链接

扫一扫