bootstrap 对齐

目录

• 一、排列方式
  • 1.1 水平方向排列
  • 1.2 垂直方向排列
  • 1.3 内容水平排列
  • 1.4 内容垂直排列
  • 1.5 自动相等
  • 1.6 文本对齐

一、排列方式

align-middle

1.1 水平方向排列

# 从左向右
.flex-{sm|md|lg|xl}-row
# 从右向左
.flex-{sm|md|lg|xl}-row-reverse

1.2 垂直方向排列

# 从上向下
.flex-{sm|md|lg|xl}-column
# 从下向上
.flex-{sm|md|lg|xl}-column-reverse

1.3 内容水平排列

# 位于容器开头
justify-content-start
# 位于容器中心
justify-content-center
# 位于容器结尾
justify-content-end

# 分布，中间有空白
justify-content-between
# 分布，中间和两边都有空白
justify-content-around

1.4 内容垂直排列

# 靠上
.align-items-{sm|md|lg|xl|}-start
# 居中
.align-items-{sm|md|lg|xl|}-center
# 靠下
.align-items-{sm|md|lg|xl|}-end
# 占满高度靠上
.align-items-{sm|md|lg|xl|}-stretch

1.5 自动相等

# 在一系列子元素中使用.flex-fill类，来强制它们平分剩下的空间
.flex-{sm|md|lg|xl}-fill

1.6 文本对齐

图片亦可用此进行对齐。

# 左对齐
.text-left
# 右对齐
.text-right
# 居中对齐
.text-center
# 两端对齐
.text-justify