CSS學習 Flex佈局自我學習記錄
阿新 • • 發佈:2018-11-07
容器6屬性 display:flex
flex-direction:
row 預設值 | row-reverse | column | column-reverse
flex-wrap
wrap | nowrap 預設值 | wrap-reverse
flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
justify-content
flex-start 預設值 | flex-end | center | space-between | space-around;
align-items
flex-start | flex-end | center | baseline | stretch 預設值;
align-content
flex-start | flex-end | center | space-between | space-around | stretch 預設值;
align-items 與 align-content的區別在於是否有wrap行為,如有則align-content是從整體考慮,而align-items僅僅是從當行考慮。
專案6屬性
order(順序)
flex-grow 預設0,存在剩餘空間也不放大
flex-shrink 預設1,如空間不足,則專案縮小
flex-basis
flex-basis屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。
flex
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self
參考資料:
https://www.runoob.com/w3cnote/flex-grammar.html