內容選自李炎恢的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 等支持媒體響應式查詢