13. Flex 彈性佈局2 BootStrap
阿新 • • 發佈：2021-06-13
使用.flex-fill強制讓每個元素專案佔據相等的水平寬度;
多個專案同時設定了.flex-fill，則它們等比例分割寬度，適合導航專案;
<!-- 使用.flex-fill強制讓每個元素專案佔據相等的水平寬度; 多個專案同時設定了.flex-fill，則它們等比例分割寬度，適合導航專案; --> <div class="d-flex flex-row border border-warning mt-5"> <div class="p-5 border border-info">1</div> <div class="p-5 border border-info flex-fill">2</div> <div class="p-5 border border-info">3</div> </div> <div class="d-flex flex-row border border-warning mt-5"> <div class="p-5 border border-info flex-fill">1</div> <div class="p-5 border border-info flex-fill">2</div> <divclass="p-5 border border-info">3</div> </div> <div class="d-flex flex-row border border-warning mt-5"> <div class="p-5 border border-info flex-fill">1</div> <div class="p-5 border border-info flex-fill">2</div> <div class="p-5 border border-info flex-fill">3</div> </div>
使用.flex-grow-*，*表示0或1，也能實現.flex-fill的功能，設定1即可;
通過元素生成的css可以看出，其實.flex-fill就是flex族的簡寫形式;
<!-- 使用.flex-grow-*，*表示0或1，也能實現.flex-fill的功能，設定1即可; 通過元素生成的css可以看出，其實.flex-fill就是flex族的簡寫形式; --> <div class="d-flex flex-row border border-warning mt-5 text-center"> <div class="p-5 border border-info">1</div> <div class="p-5 border border-info flex-grow-1">2 hello World!</div> <div class="p-5 border border-info">3</div> </div>
使用.flex-shrink-*，*表示0或1，表示是否強制更換到新行中;
<!-- 使用.flex-grow-*，*表示0或1，也能實現.flex-fill的功能，設定1即可; 通過元素生成的css可以看出，其實.flex-fill就是flex族的簡寫形式; --> <!--主要看 w-100 和 flex-shrink-* --> <div class="d-flex flex-row border border-warning mt-5 text-center"> <div class="p-5 border border-info w-100">左</div> <div class="p-5 border border-info flex-shrink-0">右 hello World!</div> </div> <div class="d-flex flex-row border border-warning mt-5 text-center"> <div class="p-5 border border-info w-100">左</div> <div class="p-5 border border-info flex-shrink-1">右 hello World!</div> </div>
使用.mr-auto和.ml-auto等對齊方式，對flex元素進行浮動對齊;
對於垂直方向，也可以使用.mb-auto和.mt-auto來設定物件方向;
<!-- 使用.mr-auto和.ml-auto等對齊方式，對flex元素進行浮動對齊; 對於垂直方向，也可以使用.mb-auto和.mt-auto來設定物件方向; --> <!-- 橫向的： --> <div class="d-flex flex-row border border-warning mt-5 text-center "> <div class="p-5 border border-info">1</div> <div class="p-5 border border-info mr-auto">2</div> <div class="p-5 border border-info">3</div> </div> <div class="d-flex flex-row border border-warning mt-5 text-center "> <div class="p-5 border border-info">1</div> <div class="p-5 border border-info ml-auto">2</div> <div class="p-5 border border-info">3</div> </div> <div class="d-flex flex-row border border-warning mt-5 text-center "> <div class="p-5 border border-info">1</div> <div class="p-5 border border-info ml-auto mr-auto">2</div> <div class="p-5 border border-info">3</div> </div> <br> --------------------------------------橫向↑ <br> <!-- 垂直的： --> --------------------------------------垂直↓ <div class="d-flex flex-column border border-dark mt-5 text-center bg-dark" style="height: 300px; "> <div class="p-2 border border-info bg-warning ">1</div> <div class="p-2 border border-info bg-warning mb-auto">2</div> <div class="p-2 border border-info bg-warning ">3</div> </div> <div class="d-flex flex-column border border-warning mt-5 text-center bg-dark" style="height: 300px;"> <div class="p-2 border border-info bg-warning mb-auto">1</div> <div class="p-2 border border-info bg-warning ">2</div> <div class="p-2 border border-info bg-warning mt-auto">3</div> </div> <div class="d-flex flex-column border border-warning mt-5 text-center bg-dark" style="height: 300px;"> <div class="p-2 border border-info bg-warning ">1</div> <div class="p-2 border border-info bg-warning ">2</div> <div class="p-2 border border-info bg-warning mt-auto ">3</div> </div>
使用.flex-wrap(包裹)和.flex-nowrap(不包裹，預設)來設定子元素專案;使用.flex-wrap-reverse進行專案排序的倒序;
<!-- 使用.flex-wrap(包裹)和.flex-nowrap(不包裹，預設)來設定子元素專案; 使用.flex-wrap-reverse進行專案排序的倒序; --> <!--看父的寬度 是100px才 裝不進：--> <!--flex-nowrap(不包裹，預設) 直接超出--> <div class="d-flex flex-row border border-warning mt-5 text-center" style="width: 100px;"> <div class="p-2 border border-info">1</div> <div class="p-2 border border-info">2</div> <div class="p-2 border border-info">3</div> <div class="p-2 border border-info">4</div> <div class="p-2 border border-info">5</div> <div class="p-2 border border-info">6</div> </div> <!--.flex-wrap(包裹) 換行包裹 順便演示一下 使用.flex-wrap-reverse進行專案排序的倒序; --> <div class="d-flex flex-row border border-warning mt-5 text-center flex-wrap flex-row-reverse" style="width: 100px;"> <div class="p-2 border border-info">1</div> <div class="p-2 border border-info">2</div> <div class="p-2 border border-info">3</div> <div class="p-2 border border-info">4</div> <div class="p-2 border border-info">5</div> <div class="p-2 border border-info">6</div> </div>
使用.order-*，來設定子元素專案的排序順序，支援.order-*-*;
.align-content-start(end、center、between、around、stretch)垂直對齊;
<!-- 使用.order-*，來設定子元素專案的排序順序，支援.order-*-*; 【這個不多說了 好早之前就搞過了啊 沒給排序的會最大的】 .align-content-start(end、center、between、around、stretch)垂直對齊; --> <!-- .align-content-start(end、center、between、around、stretch) 和 justify-content-between 差不多的 其實都得自己去嘗試 才學的到--> <div class="d-flex flex-column border border-warning mt-5 flex-wrap align-content-end" style="height: 100px;"> <div class="p-2 border border-info " style="width: 50px">1</div> <div class="p-2 border border-info " style="width: 50px">2</div> <div class="p-2 border border-info " style="width: 50px">3</div> <div class="p-2 border border-info " style="width: 50px">4</div> <div class="p-2 border border-info " style="width: 50px">5</div> <div class="p-2 border border-info " style="width: 50px">6</div> <div class="p-2 border border-info " style="width: 50px">7</div> <div class="p-2 border border-info " style="width: 50px">8</div> <div class="p-2 border border-info " style="width: 50px">9</div> </div> <div class="d-flex flex-column border border-warning mt-5 flex-wrap align-content-center" style="height: 100px;"> <div class="p-2 border border-info " style="width: 50px">1</div> <div class="p-2 border border-info " style="width: 50px">2</div> <div class="p-2 border border-info " style="width: 50px">3</div> <div class="p-2 border border-info " style="width: 50px">4</div> <div class="p-2 border border-info " style="width: 50px">5</div> <div class="p-2 border border-info " style="width: 50px">6</div> <div class="p-2 border border-info " style="width: 50px">7</div> <div class="p-2 border border-info " style="width: 50px">8</div> <div class="p-2 border border-info " style="width: 50px">9</div> </div> <!-- 橫向實驗： --> <br><br> ------------------------------------ <div class="d-flex flex-row border border-warning mt-5 flex-wrap align-content-center" style="height: 300px"> <div class="p-2 border border-info " >1</div> <div class="p-2 border border-info " >2</div> <div class="p-2 border border-info " >3</div> <div class="p-2 border border-info " >4</div> <div class="p-2 border border-info " >5</div> <div class="p-2 border border-info " >1</div> <div class="p-2 border border-info " >2</div> <div class="p-2 border border-info " >3</div> <div class="p-2 border border-info " >4</div> <div class="p-2 border border-info " >5</div> <div class="p-2 border border-info " >1</div> <div class="p-2 border border-info " >2</div> <div class="p-2 border border-info " >3</div> <div class="p-2 border border-info " >4</div> <div class="p-2 border border-info " >5</div> </div>
最後還是沒.justify-content-start(end、center、between、around) 好用.