iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 3

Day3【主題一:Flexbox】_排列彈性項目/彈性內容/調整內容

  • 分享至 

  • xImage
  •  
  1. 排列彈性項目
  • 預設情況下,無論flex-flow設定了什麼樣的數值,彈性容器中最後一個彈性項目之後的空間,一定是在main-end與cross-end方向
  1. 彈性內容
  • justify-content屬性控制了彈性項目在彈性行主軸上的分布情形
justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;
  • align-content定義彈性行在彈性容器相交軸上的分布情形
align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial|
inherit;
  • align-items屬性則是定義彈性項目在相交軸的各個彈性行中的分布
align-items:stretch|center|flex-start|flex-end|baseline|initial|inherit;
  1. 調整內容
  • justify-content:定義彈性項目在彈性容器主軸上對齊的行為
  • 宣告在彈性容器,而不是彈性項目
  • 注意:justify-content不只會影響彈性線內的放置,要是項目沒有折行且溢出彈性線時,justify-content會影響彈性項目易出的排列方式。(p589)

上一篇
Day2【主題一:Flexbox】_彈性容器(flex container)
下一篇
Day4【主題一:Flexbox】_對齊項目/align-self屬性/align-content/彈性項目
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
CSScoke
iT邦新手 3 級 ‧ 2019-09-10 00:09:05

提醒錯字

宣告「再」彈性容器

justify-content會影響彈性項目「易」出的排列方式

我要留言

立即登入留言