04 Bootstrap4的新布局——弹性盒子(flex)
4.1 定义弹性盒子(.d-flex|.d-inline-flex)
采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
应用display工具创建一个flex box容器，并将直接子元素转换为flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。
在bootstrap 4中有两个类来创建弹性盒子，分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子；.d-inline-flex类设置对象为内联块级弹性伸缩盒子。
bootstrap 中定义的.d-flex和.d-inline-flex样式类：
.d-flex {
display: flexbox !important;
display: flex !important;
}
.d-inline-flex {
display: inline-flexbox !important;
display: inline-flex !important;
}
<body class="container">
<h3 class="mb-4">定义弹性盒子</h3>
<h4>d-flex</h4>
<!--使用d-flex类创建弹性盒子-->
<div class="d-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item 3</div>
</div><br/>
<h4>d-inline-flex</h4>
<!--使用d-inline-flex类创建弹性盒子-->
<div class="d-inline-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-inline-flex item 1</div>
<div class="p-2 bg-success">d-inline-flex item 2</div>
<div class="p-2 bg-danger">d-inline-flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-1.PNG?lastModify=1594490413)
提示：对于.d-flex和.d-inline-flex也存在响应变化，可根据不同的断点来设置。
.d-{sm|md|lg|xl}-flex
.d-{sm|md|lg|xl}flex
4.2 排列方向
4.2.1 水平方向排列(.flex-row)
对于水平方向的排列，使用.flex-row设置子项目从左到右进行排列，是默认值；使用.flex-row-reverse设置子项目从右侧开始排列。
<body class="container">
<h3 class="mb-4">水平方向</h3>
<h4>flex-row（从左侧开始）</h4>
<div class="d-flex flex-row p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item 3</div>
</div><br/>
<h4>flex-row-reverse（从右侧开始）</h4>
<div class="d-flex flex-row-reverse bg-warning p-3 text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-2.PNG?lastModify=1594490413)
提示：水平方向布局还可以添加响应式的设置，响应式类如下。
.flex-{sm|md|lg|xl}-row
.flex-{sm|md|lg|xl}reverse
4.2.2 垂直方向排列(.flex-column)
使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。
<body class="container">
<h3 class="mb-4">垂直方向</h3>
<h4>flex-column（从上往下）</h4>
<div class="d-flex flex-column p-3 bg-warning text-white">
<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-danger">Flex item 3</div>
</div><br/>
<h4>flex-column-reverse（从下往上）</h4>
<div class="d-flex flex-column-reverse bg-warning p-3 text-white">
<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-danger">Flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-3.PNG?lastModify=1594490413)
提示：垂直方向布局也可以添加响应式的设置，响应式类如下。
.flex-{sm|md|lg|xl}-column
.flex-{sm|md|lg|xl}reverse
4.3 内容排列( justify-content-*)
使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐（以x轴开始，如果是flex-direction: column，则以y轴开始)，可选方向值包括：start(浏览器默认值)、end、center、between和around，说明如下：
.justify-content-start：项目位于容器的开头。
.justify-content-center：项目位于容器的中心。
.justify-content-end：项目位于容器的结尾。
.justify-content-between：项目位于各行之间留有空白的容器内。
.justify-content-around：项目位于各行之前、之间、之后都留有空白的容器内。
<body class="container">
<h3 class="mb-4">内容排列</h3>
<!--justify-content-start-->
<div class="d-flex justify-content-start mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<!--justify-content-center-->
<div class="d-flex justify-content-center mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<!--justify-content-end-->
<div class="d-flex justify-content-end mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<!--justify-content-between-->
<div class="d-flex justify-content-between mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<!--justify-content-around-->
<div class="d-flex justify-content-around bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-4.PNG?lastModify=1594490413)
4.4 项目对齐(align-items-*)
使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐（以y轴开始，如果选择flex-direction: column，则从x轴开始)，可选值有： start、end、center、baseline和stretch (浏览器默认值)。
<style>
.box{
width: 100%; /*设置宽度*/
height: 50px; /*设置高度*/
}
</style>
</head>
<body class="container">
<h3 class="mb-4">项目对齐</h3>
<div class="d-flex align-items-start bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex align-items-end bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex align-items-center bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-5.PNG?lastModify=1594490413)
4.5 自动对齐(align-self-*)
使用align-self-*通用样式，可以使Flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果是flex-direction:column则为x轴开始)，其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)。
<style>
.box{
width: 100%; /*设置宽度*/
height: 50px; /*设置高度*/
}
</style>
</head>
<body class="container">
<h3 class="mb-4">指定项目对齐</h3>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success align-self-start">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success align-self-center">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success align-self-end">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success align-self-baseline">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">Flex item 1</div>
<div class="px-2 bg-success align-self-stretch">Flex item 2</div>
<div class="px-2 bg-danger">Flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-6.PNG?lastModify=1594490413)
4.6 自动相等(.flex-fill)
在一系列子元素上使用.flex-fill类，来强制它们平分剩下的空间。
<body class="container">
<h3 class="mb-4">平均分配剩下的空间</h3>
<div class="d-flex bg-warning text-white">
<div class="flex-fill p-2 bg-primary ">Flex item1（包含大量内容）</div>
<div class="flex-fill p-2 bg-success">Flex item 2</div>
<div class="flex-fill p-2 bg-danger">Flex item 3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-7.PNG?lastModify=1594490413)
4.7 等宽变换(.flex-grow-*)
使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中，.flex-grow-1元素使用它可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间。
<body class="container">
<h5>增长</h5>
<div class="d-flex bg-warning text-white mb-4">
<div class="p-2 flex-grow-1 bg-primary">Flex item1</div>
<div class="p-2 bg-success">Flex item 2</div>
<div class="p-2 bg-danger">Flex item 3</div>
</div>
<h5>收缩</h5>
<div class="d-flex bg-warning text-white">
<div class="p-2 w-100 bg-primary">Flex item1</div>
<div class="p-2 bg-success">Flex item2</div>
<div class="p-2 w-100 bg-danger">Flex item3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-8.PNG?lastModify=1594490413)
4.8 自动浮动（Auto margins）
4.8.1 水平方向浮动(.mr|.ml-auto)
以下是通过auto margin来控制flex项目的三种案例，分别是预设（无margin）、向右推两个项目(.mr-auto)、向左推两个项目(.ml-auto)。
<body class="container">
<h3 class="mb-4">水平方向</h3>
<div class="d-flex bg-warning text-white 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-danger">Flex item</div>
</div>
<div class="d-flex bg-warning text-white mb-3">
<div class="mr-auto p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<div class="d-flex bg-warning text-white mb-3">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="ml-auto p-2 bg-danger">Flex item</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-9.PNG?lastModify=1594490413)
4.8.2 垂直方向浮动(margin-top|bottom:auto)
结合align-items、flex-direction:column、margin-top:auto或margin-bottom:auto，可以垂直移动一个Flex子容器到顶部或底部。
<body class="container">
<h3 class="mb-4">垂直方向</h3>
<div class="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;">
<div class="mb-auto p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bg-warning text-white" 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-danger">Flex item</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-10.PNG?lastModify=1594490413)
4.9 弹性布局——包裹(.flex-wrap)
改变flex项目在flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap（浏览器默认）、包裹.flex-wrap，或者反向包裹.flex-wrap-reverse。
<body class="container">
<h3 class="mb-4">包装</h3>
<div class="d-flex bg-warning text-white mb-4 flex-wrap-reverse" >
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
<div class="p-2 bg-primary">Flex项目4</div>
<div class="p-2 bg-success">Flex项目5</div>
<div class="p-2 bg-danger">Flex项目6</div>
</div>
<div class="d-flex bg-warning text-white mb-4 flex-wrap">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
<div class="p-2 bg-primary">Flex项目4</div>
<div class="p-2 bg-success">Flex项目5</div>
<div class="p-2 bg-danger">Flex项目6</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-11.PNG?lastModify=1594490413)
4.10 排列顺序(order-*)
使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后，以及重置DOM顺序，由于order只能使用整数值（例如：5），因此对于任何额外值需要自定义CSS样式。
<body class="container">
<h3 class="mb-4">排列顺序</h3>
<div class="d-flex bg-warning text-white">
<div class="order-3 p-2 bg-primary">Flex项目1</div>
<div class="order-2 p-2 bg-success">Flex项目2</div>
<div class="order-1 p-2 bg-danger">Flex项目3</div>
</div>
</body>
/Bootstrap_Markdown/images/04/4-12.PNG?lastModify=1594490413)
4.11 对齐内容(align-content)
使用flexbox容器上的align-content通用样式定义，可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。
<h5>align-content-between</h5>
<div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
<div class="p-2 bg-primary">Flex项目4</div>
<div class="p-2 bg-success">Flex项目5</div>
<div class="p-2 bg-danger">Flex项目6</div>
<div class="p-2 bg-primary">Flex项目7</div>
<div class="p-2 bg-success">Flex项目8</div>
<div class="p-2 bg-danger">Flex项目9</div>
<div class="p-2 bg-primary">Flex项目10</div>
<div class="p-2 bg-success">Flex项目11</div>
<div class="p-2 bg-danger">Flex项目12</div>
</div>
/Bootstrap_Markdown/images/04/4-14.PNG?lastModify=1594490413)