Flexbox(CSS)
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
Flexbox
Flexbox History
2009
An Interactive Guide to Flexbox in CSS
CSS3新增的排版模型
使用display宣告底下的元素使用Flexbox排版方式
display: flex
以母元素中心處為基準
容器／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屬性內
flex-flow: row wrap
flex-flow: flex-direction flex-wrap
order(CSS)
gap(CSS)
flex-basis(CSS)
flex-grow(CSS)
flex-shrink(CSS)
flex-grow(CSS)、flex-shrink(CSS)、flex-basis(CSS)可簡寫於flex屬性內
flex: 1 1 100px
flex: flex-grow flex-shrink flex-basis
單參數時
無單位為flex-grow
有單位為flex-basis
雙參數時，首個參數必為flex-grow
三參數時，順序必定固定
工具
https://flexboxpatterns.com/
CSS