iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
Modern Web

HTML 與 CSS 學習筆記系列 第 17

Day17 - Flex (4) - flex-wrap、flex-flow、內元件

延續昨日的部分,把外容器補完

flex-wrap

  • flex-wrap:就是換行屬性,當內元件數量超過外容器大小時,就會超出
  • 各屬性如下,假設 flex-direction:row
    • nowrap:單行(預設值)
    • wrap:多行,超出的往下換行(因交錯軸為↓)
    • wrap-reverse:多行,超出的往上換行(因交錯軸反轉後為↑)

image alt

from:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-flow

  • flex-flow:不知是否還記得,在一開始介紹 Flex 的 Day14 時有提到,跟 flex-directionflex-wrap 是一個階層關係,其實就是 2 者的組合
  • 前面為 flex-direction,後面為 flex-wrap

CSS

.container {
  flex-flow: column wrap;
}

內元件

  • 從之前介紹會發現,調整外容器時內元件都是一起變更的,若想單獨針對內元件進行調整,才需要進行設定
  • 內元件 (items)
    • flex:下面 3 個屬性的組合
      • flex-grow:伸展比
      • flex-shrink:收縮比
      • flex-basis:絕對值
    • order:排序
    • align-self:單一物件的交錯軸對齊

目前會先以外容器的參數先進行熟悉,後續有需要再進行補充研究或是連結參考資料的網站

參考資料

次回

預計做個簡單的 Flex 練習


上一篇
Day16 - Flex (3) - 軸線、justify-content 與 align-items
下一篇
Day18 - Flex (5) - 並排選單
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言