Flex弹性布局
引入新的Flex弹性布局,可以实现通过一整套响应灵活的实用程序,快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一度的定义CSS,还可以实现更复杂的展示样式。
启用弹性行为
使用 display
通用属性来创建一个flxbox容器,并将 直属内部子元素 转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。
FlexBox布局提供了包括诸多优秀特性,其中包括:
- 在父元素里面内容的简单的垂直对齐
- 通过使用媒体查询,可以简单的根据设备和屏幕分辨率来对内容重新排序
- CSS就能实现等高列布局以及垂直处理
中文版的FlexBox布局教程可见:https://www.z01.com/help/web/3234.shtml (译者注)
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
响应式变化也存在于.d-flex
and .d-inline-flex
这两个通用Class上。
.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
方向
基于系统提供的通用样式定义,可以设定flex的容器与内部flex元素的方向,在大多数情况下你可以忽略水平的class样式定义,因为浏览器的默认值是 row
-但在比如响应式布局时,可能需要进行显式设定此值。
浏览器预默认值下,使用 .flex-row
可设置子元素水平方向排版呈现,或者使用.flex-row-reverse
可实现元素在水平上作反方向排列(右对齐、从右到左布局)。
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
使用 .flex-column
设置垂直方向布局,或使用 .flex-column-reverse
实现垂直方向的反转布局(从底向上铺开)。
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
flex-direction
的响应式属性规范:
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
内容对齐与对准
使用flexbox弹性布局容器上的 justify-content-*
通用样式可以改变flx项目在主轴上的对齐(x轴开始,如果 flex-direction: column
则为y轴),或选方向(值)包括: start
(浏览器默认值),、end
、 center
、 between
、 around
。
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
justify-content-*
样式也通用存在响应式属性规范:
.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
对齐项目
使用 align-items-*
通用样式可以在flxbox容器上实现flex项目的对齐(y轴开始,如果选择flex-direction: column
则从x轴开始),可选参数有: start
、end
、 center
、baseline
、 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-items
的响应式属性规范:
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
自对齐
使用 align-self-*
通用样式可以使用flexbox上的项目单独改变在横轴上的对齐方式(y值开始,如果flex-direction: column
则为x轴开始),其拥有与align-items
相同的可选子项: start
、 end
、center
、 baseline
、 or stretch
(浏览器默认值)。
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
align-self
的响应式属性规范:
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
自相等
.flex-fill
在一系列兄弟元素上使用该类来强制它们变成相等的宽度,同时占据所有可用的水平空间。特别适用于等宽或正确的导航。
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
响应变化也存在flex-fill
。
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
等宽变幻
使用.flex-grow-*
实用程序切换弹性项目的增长能力以填充可用空间。在下面的示例中,.flex-grow-1
元素使用它可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
.flex-shrink-*
如有必要,使用实用程序切换弹性项目的缩小能力。在下面的示例中,第二个Flex项目.flex-shrink-1
被强制将其内容封装到一个新行中,“缩小”以允许前一个Flex项目具有更多空间.w-100
。
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
响应变化也存在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
自浮动Auto margins
当你将flex对齐与auto margin混在一起的时候,flexbox也能正常运行。以下是通过自动manrgin来控制flex项目的三种示例,分别是预设(无margin)、向右推两个项目(.mr-auto
)、向左推两个项目 (.ml-auto
):
不幸的是,IE10和IE11不能正确支持在父层具有非默认的 justify-content
值自边距浮动auto margin ,可查阅 StackOverflow对此现象的解答 了解更多细节。
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
与align-items结合实现垂直布局
结合 align-items
、 flex-direction: column
、 margin-top: auto
或 margin-bottom: auto
,可以垂直移动一个flex子容器到顶部或底部。
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
Wrap包裹
改变flex项目在flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹 .flex-nowrap
(浏览器默认)、包裹 .flex-wrap
,,或者反向包裹 .flex-wrap-reverse
。
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
flex-*-wrap-*
的响应式规范:
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Order排序
使用系统提供的通用样式定义可以实现弹性项目的 可视化 排序。我们仅提供将一个特件排在第一或最后,以及重置DOM顺序,由于order
只能使用整数值(如:5
),因此对于需要的任何额外值需要自定义CSS。
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>
order-*
排序方法的响应式属性:
.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-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-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-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-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
对齐内容
使用flexbox容器上的 align-content
通用样式定义,可以将flex物价于横轴上 一起对齐,可选方向有 start
(浏览器默认值)、 end
、 center
、 between
、 around
、 stretch
。为了展现这些效果,下面实例我们已经实施了flex-wrap: wrap
定义并增加了很多子项目的数量,如下所示:
注意! 此属性对于单行的Flex项目没有影响。
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
align-content-*
方法的响应式属性:
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch