内容选自李炎恢的Bootstrap v4.x教程笔记

一.Flex 样式

1. 使用.d-flex 和.d-inline-flex 实现开启 flex 布局样式;

<div class="d-flex">Flex 弹性布局</div>

 


2. 这一对样式,也支持响应式的媒体查询:.d-*-flex;
3. .flex-row 可以呈现子元素水平方向的位置,默认居左并从左到右显示(1,2,3);

<div class="d-flex flex-row">
  <div class="p-2">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2">项目 3</div>
</div>

 


4. .flex-row-reverse 让子元素水平方向的位置居右并从左到右显示(3,2,1);

<div class="d-flex flex-row-reverse">
  <div class="p-2">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2">项目 3</div>
</div>

 


5. 这一对样式,也支持响应式的媒体查询:.flex-*-row;
6. .flex-column 实现子元素垂直效果,并从上往下显示(1,2,3);

<div class="d-flex flex-column">
  <div class="p-2">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2">项目 3</div>
</div>

 


7. .flex-column-reverse 实现子元素垂直效果,并从上往下显示(3,2,1);

<div class="d-flex flex-column-reverse">
  <div class="p-2">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2">项目 3</div>
</div>

 


8. 这一对样式,也支持响应式的媒体查询:.flex-*-column;

9. .justify-content-start(end、center、between、around)实现内容对齐;

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

 


10. 这五个内容对齐样式,也支持媒体查询:justify-content-*-start;
11. .align-items-start(end、center、baseline、stretch)实现项目对齐;

<div class="d-flex align-items-start" style="height:100px;">
<div class="d-flex align-items-end" style="height:100px;">
<div class="d-flex align-items-center" style="height:100px;">
<div class="d-flex align-items-baseline" style="height:100px;">
<div class="d-flex align-items-stretch" style="height:100px;">

 


12. 这五个项目对齐,也支持媒体查询:align-items-*-start;
13. .align-self-start(end、center、baseline、stretch)实现单项目对齐;

<div class="d-flex m-2 p-2" style="height:100px;">
  <div class="p-2 align-self-start">项目 1</div>
  <div class="p-2 align-self-end">项目 2</div>
  <div class="p-2 align-self-center">项目 3</div>
  <div class="p-2 align-self-baseline">项目 4</div>
  <div class="p-2 align-self-stretch">项目 5</div>
</div>

 


14. 使用.flex-fill 强制让每个元素项目占据相等的水平宽度;

<div class="d-flex">
  <div class="p-2 flex-fill">项目 1</div>
  <div class="p-2 flex-fill">项目 2</div>
  <div class="p-2 flex-fill">项目 3</div>
</div>

 


15. 三个项目同时设置了.flex-fill,则它们等比例分割宽度,适合导航项目;
16. 如果其中一个或两个没有设置.flex-fill,则没有设置的会被设置的填充宽度;
17. .flex-*-fill 也可以实现响应式的媒体查询操作;
18. 使用.flex-grow-*,*表示 0 或 1,也能实现.flex-fill 的功能,设置 1 即可;

<div class="d-flex">
  <div class="p-2 flex-grow-1">项目 1</div>
  <div class="p-2 flex-grow-1">项目 2</div>
  <div class="p-2 flex-grow-1">项目 3</div>
</div>

 


19. 通过元素生成的 CSS,我们可以看出,其实.flex-fill 就 flex 族的简写形式;
20. 使用.flex-shrink-*,*表示 0 或 1,表示是否强制更换到新行中;

<div class="d-flex">
  <div class="p-2 w-100">项目 1</div>
  <div class="p-2 flex-shrink-0">项目 2</div>
</div>

 


21. 这一对样式,也支持响应式的媒体查询:.flex-*-grow|shrink-*;
22. 使用.mr-auto 等对齐方式,对 flex 元素进行浮动对齐;

<div class="d-flex">
  <div class="p-2 mr-auto">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2">项目 3</div>
</div>

<div class="d-flex">
  <div class="p-2">项目 1</div>
  <div class="p-2">项目 2</div>
  <div class="p-2 border ml-auto">项目 3</div>
</div>

 


23. 对于垂直方向,也可以使用.mb-auto 和.mt-auto 来设置对象方向;

<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2 mb-auto">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div>
</div>
<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2 mt-auto">项目 3</div>
</div>

 


24. 使用.flex-wrap(包裹)和.flex-nowrap(不包裹,默认)来设置子元素项目;

<div class="d-flex flex-wrap" style="width: 200px;">
    <div class="p-2">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div>
    <div class="p-2">项目 4</div>
    <div class="p-2">项目 5</div>
    <div class="p-2">项目 6</div>
    <div class="p-2">项目 7</div>
    <div class="p-2">项目 8</div>
    <div class="p-2">项目 9</div>
    <div class="p-2">项目 10</div>
</div>

 


25. 使用.flex-warp-reverse 进行项目排序顺序的倒序;
26. 这三个样式,也支持响应式的媒体查询:.flex-*-warp 等;
27. 使用.order-*,来设置子元素项目的排序顺序,支持.order-*-*;

<div class="d-flex text-light">
  <div class="p-2 order-3">项目 1</div>
  <div class="p-2 order-1">项目 2</div>
  <div class="p-2 order-2">项目 3</div>
</div>

 

28. .align-content-start(end、center、between、around、stretch)垂直对齐;

<div class="d-flex flex-wrap align-content-end" style="height: 200px;">

 

29. .align-content-*-start 等支持媒体响应式查询