学习记录-bootstrap-弹性盒子

bootstrap弹性盒子

1. 定义弹性盒子
2. 排列方向
3. 内容排列
4. 自定义布局
5. 浮动布局(子元素不能设置高)
6. 包裹

阶段案例

案例实现步骤

1. 准备阶段

了解bootstrap布局的基础知识

1. 定义弹性盒子

类名设置	效果
.d-flex	100%宽度的弹性盒子
.d-inline-flex	内容撑开的弹性盒子

两者存在相应式(.d-*-flex)，符号代表sm，md，lg，xl，xxl等

2. 排列方向

类名设置	效果
.flex-row	默认从左到右水平排列，加-reverse从右到左
.flex-columnl	默认从上到下垂直排列，加-reverse从下到上

两者存在响应式(.flex-sm-column)

3. 内容排列

类名设置	效果
.justify-content-start/center/end/around/between	元素沿x轴排列
.align-items-*	元素沿y轴排列,宽度充满
…align-content-*	元素顺序排列,整体沿y轴排列

两者存在响应式(.justify-content-sm-start)

4. 自定义布局

<

类名设置	效果