CSS通用样式2——Flex布局

Bootstrap4与Bootstrap3最大的区别是Bootstrap 4使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子也是CSS的一种新的布局模式，更适合响应式的设计。

一.定义弹性盒子

使用display通用类d-flex或d-inline-flex类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"

弹性盒子容器案例：

 对于弹性盒子容器也存在相应变化，可根据不同的断点来设置。响应式类如下：

.d-{sm | md | lg | xl} -flex

.d-{sm | md | lg | xl}-inline-flex

二.排列方向

弹性盒子中子项目的排列方式包括水平排列和垂直排列，Bootstrap中定义了相应的类来进行设置。

水平方向：
使用.flex-row类可以设置弹性子元素水平显示，这是默认的。使用.flex-row-reverse类设置子项目从右侧开始排列。

 水平方向布局还可以添加响应式设置，响应式类如下：

.d-{sm | md | lg | xl} -row

.d-{sm | md | lg | xl}-row-reverse

垂直方向：

使用.flex-column类可以设置弹性子元素垂直显示，.flex-column-reverse类设置子项目作垂直方向的反转。

 三.内容排列

使用flexbox容器上的.justify-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）。*可以是从start（浏览器默认值）、end. center .between或around。

justify-content-start  ： 子元素位于容器的开头

justify-content-center ： 子元素位于容器的中心

justify-content-end ： 子元素位于容器的结尾

justify-content-between ： 子元素位于各行之间留有空白的容器内

justify-content-around ： 子元素位于各行之前，之间，之后都留有空白的容器内

 内容排列布局还可以添加响应式设置，响应式类如下：

.d-{sm | md | lg | xl} -start

.d-{sm | md | lg | xl}-end

.d-{sm | md | lg | xl}-center

.d-{sm | md | lg | xl}-between

.d-{sm | md | lg | xl}-around

四.项目对齐

在flexbox容器上使用.align-items-*类可以改变横轴上flex子项目的对齐（y轴开始，如果flex-
direction:column则为x轴）。从start、end、center、baseline或stretch（浏览器默认值）中选择。
 .align-items-{sm | md | lg | xl} -start

.align-items-{sm | md | lg | xl}-end

.align-items-{sm | md | lg | xl}-center

.align-items-{sm | md | lg | xl}-baseline

.align-items-{sm | md | lg | xl}-stretch

五.自身对齐

使用flexbox容器上的.align-self-类单独改变在横轴上的对齐（y轴开始，如果flex-direction:column则为x轴）。其拥有与.align-items相同的可选子项:start、end、center、baseline和stretch（浏览器默认值）。

 自身对齐布局还可以添加响应式设置，响应式类如下：

.align-self-{sm | md | lg | xl} -start

.align-self-{sm | md | lg | xl}-end

.align-self-{sm | md | lg | xl}-center

.align-self-{sm | md | lg | xl}-baseline

.align-self-{sm | md | lg | xl}-stretch

 六.自动相等

在相邻元素上使用.flex-fili类来强制它们在相同的宽度上分配所有可用的水平空间。

七.等宽变换

使用.flex-grow-*类别可以切换弹性子元素增长以填充可用空间。如有需要，可以使用.flex-shrink-*
类来切换调整项目的尺寸。

 

八.排序

使用.order-*类可以改变flex子容器的排序顺序。Bootstrap仅提供将一个物件排在第一个或最后一个，以及重置DOM顺序。由于order只能使用整数值（例如5），对需要的任何额外值则需要自定义CSS。

 九.对齐内容

使用flexbox容器上的.align-content-*类可以将flex子元素于横轴上一起对齐。从start（浏览器预设）、end、center、between、around或者stretch中选择。为了呈现效果，下面示例中加入了flex-wrap: wrap及增加了flex子容器的数量。因为此特性对于单行的flex无作用。