iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

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

Day20--Bootstrap Flex使用(9)

  • 對Flex items設置.order-*可調整Flex items的排序,.order-*的數字越小權重越高。
  • 範例
<div class="d-flex bg-primary text-white">
        <div class="p-2 border border-dark order-2">Flex item 1</div>
        <div class="p-2 border border-dark order-3">Flex item 2</div>
        <div class="p-2 border border-dark order-5">Flex item 3</div>
        <div class="p-2 border border-dark order-4">Flex item 4</div>
        <div class="p-2 border border-dark order-1">Flex item 5</div>
</div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20201005/20129568c9OdRCGuZs.png

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

尚未有邦友留言

立即登入留言