使用 display
通用属性来创建一个flxbox容器,并将 直属内部子元素 转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。
FlexBox布局提供了包括诸多优秀特性,其中包括:
中文版的FlexBox布局教程可见:https://www.z01.com/help/web/3234.shtml (译者注)
响应式变化也存在于.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-column
设置垂直方向布局,或使用 .flex-column-reverse
实现垂直方向的反转布局(从底向上铺开)。
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
。
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
(浏览器默认值)。
选择flex-direction: column
则从x轴开始
上下左右居中
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
(浏览器默认值)。
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-fill
。
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
flex:1和flex:auto详解
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
实现一侧固定宽度,一侧自适应,使用flex:1;实现,发现左侧无论多少内容,右侧宽度都是固定的,没有被挤压
flex-grow:0;flex-shrink;1;flex-basis:auto;缺一不可,如果没有flex-basis:auto;
实现一侧固定宽度,一侧自适应,利用Bootstrap已封装的css实现(发现实现不了)
使用.flex-grow-*
实用程序切换弹性项目的增长能力以填充可用空间。在下面的示例中,.flex-grow-1
元素使用它可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
.flex-shrink-*
如有必要,使用实用程序切换弹性项目的缩小能力。在下面的示例中,第二个Flex项目.flex-shrink-1
被强制将其内容封装到一个新行中,“缩小”以允许前一个Flex项目具有更多空间.w-100
。
响应变化也存在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
当你将flex对齐与auto margin混在一起的时候,flexbox也能正常运行。以下是通过自动manrgin来控制flex项目的三种示例,分别是预设(无margin)、向右推两个项目(.mr-auto
)、向左推两个项目 (.ml-auto
):
结合 align-items
、 flex-direction: column
、 margin-top: auto
或 margin-bottom: auto
,可以垂直移动一个flex子容器到顶部或底部。
改变flex项目在flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹 .flex-nowrap
(浏览器默认)、包裹 .flex-wrap
,,或者反向包裹 .flex-wrap-reverse
。
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
使用系统提供的通用样式定义可以实现弹性项目的 可视化 排序。我们仅提供将一个特件排在第一或最后,以及重置DOM顺序,由于order
只能使用整数值(如:5
),因此对于需要的任何额外值需要自定义CSS。
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项目没有影响。
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