Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
This document uses PHP Chinese website manual Release

characters

使用一整套响应式Flexbox实用程序快速管理网格列，导航，组件等的布局，对齐和大小。对于更复杂的实现，可能需要自定义CSS。

启用柔性行为

应用display实用程序创建一个flexbox容器并将直接的子元素转换为flex项目。Flex容器和项目可以通过额外的flex属性进一步修改。

<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和.d-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

方向

使用方向工具在柔性容器中设置柔性物品的方向。在大多数情况下，您可以省略浏览器默认的水平类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

对齐内容

justify-content在flexbox容器上使用实用程序来更改主轴上的flex项目的对齐方式（x轴开始，y轴为if flex-direction: column）。选择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在flexbox容器上使用实用程序来更改横轴上的flex项目的对齐方式（y轴为开始，x轴为if flex-direction: column）。选择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

对齐self

align-self在Flexbox项目上使用实用程序来单独更改交叉轴上的对齐方式（要开始的是y轴，如果是x轴flex-direction: column）。选择相同的选项align-items：start，end，center，baseline，或者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对齐与自动边距混合时，Flexbox可以做一些非常棒的事情。下面显示的是通过自动边距控制弹性项目的三个示例：默认（无自动边距），将两个项目向右推（.mr-auto），并将两个项目向左推（.ml-auto）。

不幸的是，IE10和IE11不能正确支持父项具有非默认 justify-content 值的弹性项目上的自动边距。

<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，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>

包

更改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

对齐内容

使用align-contentFlexbox容器上的实用工具将交叉轴上的Flex项目对齐在一起。选择start（浏览器的默认），end，center，between，around或stretch。为了演示这些实用程序，我们已经实施flex-wrap: wrap并增加了弹性项目的数量。

提提%21此属性对单行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

Previous article： Next article：