iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

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

Day4【主題一:Flexbox】_對齊項目/align-self屬性/align-content/彈性項目

  1. 對齊項目
  • align-items:定義彈性項目在彈性容器交叉軸上對齊的行為。
  • 宣告在彈性容器,而不是彈性項目。
  • align-items預設值是stretch,彈性項目會與親代等高。
  • 要是設定了min-height、min-width、max-height、max-width、width、height,這些屬性優先權較高,stretch不會影響他的大小
  1. align-self屬性
  • align-self屬性用來在個別彈性項目的層級上覆寫align-items屬性。

8.align-content

  • align-content屬性決定了當彈性容器在相交軸方向有額外空間時,額外空間在各彈性行間的分配方式。
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
  1. 彈性項目
  • flexible box layout標準規範提供了能夠直接作用在彈性項目的屬性。
  • 也能作用在生成內容(:before / :after)
  • 彈性項目的邊界範圍不會重疊
  • float與clear作用在彈性項目時會被忽略(但float仍可透過影響display屬性的計算值,改變方框的生成)
  • vertical-align除了影響彈性項目中的文字對齊方式之外,對彈性項目也沒有任何作用。
  • 彈性項目的絕對定位子代,如同其他使用絕對定位的元素,會移出文件的流向。
  • 設置 flex-wrap:nowrap的彈性行預設會溢出彈性內容(不折行),因為對於彈性項目而言,min-width的作用值是auto而非0。(傳統上,min-width的預設值是0)

上一篇
Day3【主題一:Flexbox】_排列彈性項目/彈性內容/調整內容
下一篇
Day5【主題一:Flexbox】_彈性項目相關屬性/flex屬性/flex-grow屬性/flex-shrink屬性/flex-basis屬性/flex縮寫/order屬性
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

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

提醒錯字
宣告「再」彈性容器

當彈性容器在「香蕉軸」方向
相交軸

彈性行「裕社」會「一出」彈性內容
預設/溢出

我要留言

立即登入留言