# Bootstrap 通用類別-Flex ###### tags: `BootStrap` Date : 2022/05/18 ## d-inline-flex `d-inline-flex` ```html <div class="d-inline-flex p-2 bg-primary justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div> <div class="d-inline-flex p-2 bg-success justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div> <div class="d-inline-flex p-2 bg-danger justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div> <div class="d-inline-flex p-2 bg-warning justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div> ``` ![](https://i.imgur.com/IlLOG5Z.png) ## 方向性-水平 row `d-flex` +`flex-row` ```htmlembedded= <!-- flex-row --> <div class="d-flex flex-row"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> <!-- flex-row-reverse --> <div class="d-flex flex-row-reverse"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> ``` ![](https://i.imgur.com/8SIkR4w.png) ## 方向性-垂直 column `d-flex` + `flex-column` ```htmlmixed= <!-- flex-column --> <div class="d-flex flex-column"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> <!-- flex-column-reverse --> <div class="d-flex flex-column-reverse"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> ``` ![](https://i.imgur.com/oUKEIRM.png) ## 主軸對齊 justify-content ```htmlembedded= <div class="d-flex justify-content-start"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> ``` - justify-content-start ![](https://i.imgur.com/32ZJiY2.png) - justify-content-end ![](https://i.imgur.com/SmI14FM.png) - justify-content-center ![](https://i.imgur.com/znksdwk.png) - justify-content-between ![](https://i.imgur.com/m7XqmX8.png) D - justify-content-around 彈性項目周圍分配相同空間 ![](https://i.imgur.com/cXB0eOl.png) - justify-content-evenly 彈性項目之間的間隔相等 ![](https://i.imgur.com/c8ZRF2x.png) ## 次軸(交叉軸)對齊 align-items ```htmlembedded= <div class="d-flex align-items-start"> <div class="p-2">Flex Item 1</div> <div class="p-2">Flex Item 2</div> <div class="p-2">Flex Item 3</div> </div> ``` - align-items-start ![](https://i.imgur.com/KF9nj5u.png) - align-items-end ![](https://i.imgur.com/mzzMo7c.png) - align-items-center ![](https://i.imgur.com/stZESe0.png) - align-items-basline 對其彈性項目文字底部的 baeline ![](https://i.imgur.com/bxamrMg.png) - align-items-stretch stretch (預設) 延伸拉長彈性項目的最大尺寸 ![](https://i.imgur.com/FOkBNel.png) ## align-self 彈性項目自身對齊 ![](https://i.imgur.com/WXsey2J.png) ```htmlmixed= <div class="d-flex"> <div class="align-self-start">flex-item</div> <div class="align-self-end">flex-item</div> <div class="align-self-center">flex-item</div> <div class="align-self-stretch">flex-item</div> <div class="align-self-baseline" style="font-size:50px;">flex-item</div> <div class="align-self-baseline" style="font-size:30px;">flex-item</div> </div> ``` ## .flex-fill 與 .flex-grow-1 作用相同，但它們都不是等寬 >.flex-grow <font color="red">=</font> flex: 1 1 auto <font color="red">=</font> flex: auto 因為 flex-basis 被設定為 auto，==內容太多可以撐開欄位寬度== ![](https://i.imgur.com/TWjeO4N.png) ```html <div class="d-flex"> <div class="p-2 flex-grow-1">Flex ITEM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, quaerat.</div> <div class="p-2 flex-grow-1">Flex ITEM</div> <div class="p-2 flex-grow-1">Flex ITEM</div> </div ``` ## 自己建立一個 .flex-1 class ==flex:1 才是真正的平均欄寬==。 flex:1 => flex:1 1 0%; flex-basis 被設定為 0%，==內容不會撐開欄位寬度==。 ![](https://i.imgur.com/aGgF1eH.png) ```css .flex-1 { flex: 1; } ``` ```html <div class="d-flex"> <div class="p-2 flex-1">Flex ITEM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, quaerat.</div> <div class="p-2 flex-1">Flex ITEM</div> <div class="p-2 flex-1">Flex ITEM</div> </div> ``` ## margin ![](https://i.imgur.com/iGFsl7g.png) ```html <div class="d-flex"> <!-- me-auto => margin-right: auto --> <div class="p-2 me-auto">Flex ITEM</div> <div class="p-2">Flex ITEM</div> <div class="p-2">Flex ITEM</div> </div> <div class="d-flex"> <div class="p-2">Flex ITEM</div> <div class="p-2">Flex ITEM</div> <!-- ms-auto => margin-left: auto --> <div class="p-2 ms-auto">Flex ITEM</div> </div> ``` ## 爆版 ![](https://i.imgur.com/824ATPK.png) ```html <div class="d-flex align-items-center w-25 border border-5"> <div class="w-40 h-75 flex-shrink-0">item1</div> <div class="w-40 h-75 flex-shrink-0">item2</div> <div class="w-40 h-75 flex-shrink-0">item3</div> <div class="w-40 h-75 flex-shrink-0">item4</div> <div class="w-40 h-75 flex-shrink-0">item5</div> <div class="w-40 h-75 flex-shrink-0">item6</div> </div> ``` ## .flex-wrap ![](https://i.imgur.com/TeO0zgm.png) ```HTML <div class="d-flex flex-wrap"> <div class="w-25">items1</div> <div class="w-25">items2</div> <div class="w-25">items3</div> <div class="w-25">items4</div> <div class="w-25">items5</div> <div class="w-25">items6</div> </div> ``` - .flex-wrap-reverse ![](https://i.imgur.com/TL1d2Kz.png) ## 對齊內容 ```htmlembedded= <div class="d-flex flex-wrap align-content-start"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> <div class="d-flex flex-wrap align-content-center"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> <div class="d-flex flex-wrap align-content-end"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> <div class="d-flex flex-wrap align-content-between"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> <div class="d-flex flex-wrap align-content-around"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> <div class="d-flex flex-wrap align-content-stretch"> <div class="w-25">item1</div> <div class="w-25">item2</div> <div class="w-25">item3</div> <div class="w-25">item4</div> <div class="w-25">item5</div> <div class="w-25">item6</div> </div> ``` ![](https://i.imgur.com/s2quGiQ.png)