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