Flexbox(CSS)
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
Flexbox
Flexbox History
2009
An Interactive Guide to Flexbox in CSS
CSS3新增的排版模型
宣告底下的元素使用Flexbox排版方式
以母元素中心處為基準
容器/container
將定位點切為
主軸
main axis
預設為橫排/row
次軸
cross axis
預設為直排/column
https://i.imgur.com/S7QmP6M.png
flex-direction(CSS)
justify-content(CSS)
align-items(CSS)
align-content(CSS)
align-self(CSS)
flex-wrap(CSS)
flex-direction(CSS)、flex-wrap(CSS)可簡寫於flex-flow屬性內
order(CSS)
gap(CSS)
flex-basis(CSS)
flex-grow(CSS)
flex-shrink(CSS)
flex-basis(CSS)、flex-grow(CSS)、flex-shrink(CSS)可簡寫於flex屬性內
工具
https://flexboxpatterns.com/
CSS