文章目录
Bootstrap中的Flex
弹性盒子是css3的一种布局方式,更适合于响应式的开发
- d-flex—创建flexbox容器并将子项转换为flex项
- d-inline-flex—创建行内flexbox容器
<div class="container d-flex p-3 bg-info">
<div class="p-2">弹性项目111</div>
<div class="p-2">弹性项目222</div>
<div class="p-2">弹箱项目333</div>
</div>
d-flex与d-inline-flex也存在响应式变化
- .d-sm-flex 屏幕宽度大于或者等于576px生效
- .d-sm-inline-flex
- .d-md-flex 屏幕宽度大于或等于768px生效
- .d-md-inline-flex
- .d-lg-flex 屏幕宽度大于或等于992px生效
- .d-lg-inline-flex
- .d-xl-flex 屏幕宽度大于或等于1200生效
- .d-xl-inline-flex
flex水平布局
- .flex-row—来设置水平方向(浏览器的默认值)
- .flex-row-reverse—来从相反的一侧开始水平方向。
<div class="container d-flex p-3 bg-info flex-row-reverse">
<div class="p-2">弹性项目111</div>
<div class="p-2">弹性项目222</div>
<div class="p-2">弹箱项目333</div>
</div>
flex垂直布局
- .flex-column—设置垂直方向,
- .flex-column-reverse—从相反的方向开始设置垂直方向。
flex水平与垂直也存在响应式变化
- .flex-sm-row 屏幕宽度大于或者等于576px生效
- .flex-sm-row-reverse
- .flex-sm-column 屏幕宽度大于或者等于576px生效
- .flex-sm-column-reverse
(md,lg,xl)
内容排列(justify-content响应式变化也存在于这里sm,md,lg,xl)
在flex容器上使用justify-content来更改flex item在主轴上的对齐方式(x轴为起始,y轴为伸缩方向:列)。选择
start (浏览器默认), end, center, between, 或者 around。
<div class="p-2 d-flex justify-content-start bg-info">弹性项目111</div>
<div class="p-2 d-flex justify-content-end bg-warning">弹性项目222</div>
<div class="p-2 d-flex justify-content-center bg-danger">弹箱项目333</div>
<div class="p-2 d-flex justify-content-between bg-success">弹性项目444</div>
<div class="p-2 d-flex justify-content-around bg-primary">弹箱项目555</div>
子元素对齐方式Align items(响应式变化也存在于这里sm,md,lg,xl)
在flexbox容器上使用align-items来更改伸缩项目在侧轴的对齐方式(y轴为起始,x轴为伸缩方向:列)。选择start、end、center、baseline或stretch(浏览器默认)
<div class=" d-flex align-items-start bg-info">弹性项目111</div>
<div class=" d-flex align-items-end bg-warning">弹性项目222</div>
<div class=" d-flex align-items-center bg-danger">弹箱项目333</div>
<div class=" d-flex align-items-baseline bg-success"><p class="bg-info">弹箱项目444</p></div>
<div class="d-flex align-items-stretch bg-primary"><p class