Day17--Bootstrap Flex使用(6)

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

30天CSS&Bootstrap排版統整系列第 17 篇

12th鐵人賽

zxc29019009

團隊nutc imac 惠靈頓牛排

2020-10-02 18:52:28

721 瀏覽

分享至

對Flex item設置.flex-grow-1可讓該Flex item使用所有剩餘空間，若對兩個以上的Flex items設置.flex-grow-1則會讓那些Flex items平均分配所有剩餘空間。
範例

<div class="d-flex bg-primary text-white">
        <div class="p-2 mr-1 border border-dark">Flex item 1</div>
        <div class="p-2 mr-1 border border-dark">Flex item 2</div>
        <div class="p-2 flex-grow-1 border border-dark">Flex item 3</div>
</div>