iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
1
Modern Web

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

Day18--Bootstrap Flex使用(7)

  • 對Flex item設置.mr-auto可以設置Flex item的右外邊距為auto
  • 對Flex item設置.ml-auto可以設置Flex item的左外邊距為auto
  • 對Flex item設置.mt-auto可以設置Flex item的上外邊距為auto
  • 對Flex item設置.mb-auto可以設置Flex item的下外邊距為auto
  • 範例
<div class="d-flex bg-primary text-white">
        <div class="p-2 border border-dark mr-auto">Flex item 1</div>
        <div class="p-2 border border-dark">Flex item 2</div>
        <div class="p-2 border border-dark">Flex item 3</div>
    </div>
    <div class="d-flex bg-primary text-white mt-1">
        <div class="p-2 border border-dark">Flex item 1</div>
        <div class="p-2 border border-dark">Flex item 2</div>
        <div class="p-2 border border-dark ml-auto">Flex item 3</div>
    </div>
    <div class="d-flex align-items-start flex-column bg-primary text-white mt-1" style="height: 200px;">
        <div class="p-2 border border-dark">Flex item 1</div>
        <div class="p-2 border border-dark mt-auto">Flex item 2</div>
        <div class="p-2 border border-dark">Flex item 3</div>
    </div>
    <div class="d-flex align-items-start flex-column bg-primary text-white mt-1" style="height: 200px;">
        <div class="p-2 border border-dark">Flex item 1</div>
        <div class="p-2 border border-dark mb-auto">Flex item 2</div>
        <div class="p-2 border border-dark">Flex item 3</div>
    </div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20201003/20129568TBCQB4TY7z.png

上一篇
Day17--Bootstrap Flex使用(6)
下一篇
Day19--Bootstrap Flex使用(8)
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言