Flex弹性布局

引入新的Flex弹性布局,可以实现通过一整套响应灵活的实用程序,快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一度的定义CSS,还可以实现更复杂的展示样式。

启用弹性行为

使用 display 通用属性来创建一个flxbox容器,并将 直属内部子元素 转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。

FlexBox布局提供了包括诸多优秀特性,其中包括:

  1. 在父元素里面内容的简单的垂直对齐
  2. 通过使用媒体查询,可以简单的根据设备和屏幕分辨率来对内容重新排序
  3. CSS就能实现等高列布局以及垂直处理

中文版的FlexBox布局教程可见:https://www.z01.com/help/web/3234.shtml (译者注)

I'm a flexbox container!
<div class="d-flex p-2">I'm a flexbox container!</div>
I'm an inline flexbox container!
<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 可实现元素在水平上作反方向排列(右对齐、从右到左布局)。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<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 实现垂直方向的反转布局(从底向上铺开)。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<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 (浏览器默认值),、endcenterbetweenaround

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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轴开始),可选参数有: startendcenterbaselinestretch (浏览器默认值)。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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相同的可选子项: startendcenterbaseline、 or stretch (浏览器默认值)。

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<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在一系列兄弟元素上使用该类来强制它们变成相等的宽度,同时占据所有可用的水平空间。特别适用于等宽或正确的导航。

Flex item
Flex item
Flex item
<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项目具有必要的空间。

Flex item
Flex item
Third flex item
<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

Flex item
Flex item
<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对此现象的解答 了解更多细节。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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-itemsflex-direction: columnmargin-top: automargin-bottom: auto,可以垂直移动一个flex子容器到顶部或底部。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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。

First flex item
Second flex item
Third flex item
<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 (浏览器默认值)、 endcenterbetweenaroundstretch。为了展现这些效果,下面实例我们已经实施了flex-wrap: wrap定义并增加了很多子项目的数量,如下所示:

注意! 此属性对于单行的Flex项目没有影响。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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