Bootstrap Flexbox(灵活盒子)
-
定义和使用
Bootstrap 3 和 Bootstrap 4 之间的最大区别在于,Bootstrap 4 现在使用 flexbox 而不是 float 来处理布局。灵活的盒子布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。 如果您不熟悉 Flex,可以在我们的 CSS Flexbox 教程中阅读有关它的信息。要创建 Flexbox 容器并将直接子级转换为 flex 项,请使用 .d-flex 类:
尝试一下<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3要创建内联 Flexbox 容器,请使用 .d-inline-flex 类:
尝试一下<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3注意:IE9和更早版本不支持 Flexbox。如果需要IE8-9支持,请使用 Bootstrap3。Bootstrap3是Bootstrap的最稳定的版本,团队仍然支持它进行重要的错误修正和文档更改。 但是,不会添加任何新功能。 -
水平和垂直方向
使用 .flex-row 可以水平(并排)显示弹性项目;这是默认值。提示:使用 .flex-row-reverse 可以将水平方向右对齐:
尝试一下<div class="d-flex flex-row bg-secondary mb-1"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3使用 .flex-column 垂直显示弹性项目(彼此顶部),或使用 .flex-column-reverse 反转垂直方向:
尝试一下<div class="d-flex flex-column mb-1"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3 -
Justify Content 属性
使用 .justify-content- * 类更改弹性项目的对齐方式;有效的类是开始(默认),结束,中心,之间或周围的类:
尝试一下<div class="d-flex justify-content-start mb-1">...</div> <div class="d-flex justify-content-end mb-1">...</div> <div class="d-flex justify-content-center mb-1">...</div> <div class="d-flex justify-content-between mb-1">...</div> <div class="d-flex justify-content-around mb-1">...</div>
输出结果如下:Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3 -
填充/等宽
在弹性项目上使用 .flex-fill 强制它们相等的宽度:
尝试一下<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3在弹性项目上使用 .flex-grow-1 可以占用其余空间;在下面的示例中,前两个 flex 项占用其必要的空间,而最后一个 flex 项占用剩余的可用空间:
尝试一下<div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary flex-grow-1">Flex item 3</div> </div>
提示:在弹性项目上使用 .flex-shrink-1可以在必要时使其收缩。输出结果如下:Flex item 1Flex item 2Flex item 3使用 .order 类更改特定弹性商品的视觉顺序。 有效的类是从0到12,其中最小的数字具有最高的优先级(order-1在order-2之前显示,依此类推。):
尝试一下<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div>
使用 .mr-auto(向右推项目)或使用 .ml-auto(向左推项目)轻松添加自动边距以伸缩项目:
尝试一下<div class="d-flex bg-secondary mb-1"> <div class="p-2 mr-auto bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 ml-auto bg-primary">Flex item 3</div> </div>
输出结果如下:Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3 -
Wrap 包裹
使用 .flex-nowrap(默认)、.flex-wrap 或 .flex-wrap-reverse 控制弹性项目如何包装在弹性容器中。
尝试一下<div class="d-flex flex-wrap">...</div> <div class="d-flex flex-wrap-reverse">...</div> <div class="d-flex flex-nowrap">...</div>
通过更改上面示例框中的弹性项目的包装,单击下面的按钮以查看三个类之间的区别:输出结果Flex item 1Flex item 2Flex item 3Flex item 4Flex item 5Flex item 6Flex item 7Flex item 8Flex item 9Flex item 10Flex item 11Flex item 12Flex item 13Flex item 14Flex item 15 -
对齐方式
使用 .align-content- * 类控制收集的弹性项目的垂直对齐方式。有效的类是 .align-content-start(默认)、.align-content-end,.align-content-center,.align-content-between,.align-content-around 和 .align-content-stretch。
尝试一下<div class="d-flex flex-wrap align-content-start">...</div> <div class="d-flex flex-wrap align-content-end">...</div> <div class="d-flex flex-wrap align-content-center">...</div> <div class="d-flex flex-wrap align-content-around">...</div> <div class="d-flex flex-wrap align-content-stretch">...</div>
使用 .align-items- * 类控制弹性项目的单行的垂直对齐方式。有效的类是 .align-items-start,.align-items-end,.align-items-center,.align-items-baseline 和 .align-items-stretch(默认)。
尝试一下<div class="d-flex align-items-start">...</div> <div class="d-flex align-items-end">...</div> <div class="d-flex align-items-center">...</div> <div class="d-flex align-items-baseline">...</div> <div class="d-flex align-items-stretch">...</div>
使用 .align-self- * 类控制指定弹性项目的垂直对齐方式。有效的类是 .align-self-start,.align-self-end,.align-self-center,.align-self-baseline 和 .align-self-stretch(默认)。
尝试一下<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-start">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div>
了解有关更多flex的类知识,请参考我们的 Bootstrap CSS类参考