給自己的~froggy小筆記


Posted by cmtilo on 2021-05-23

justify-content:以主軸線排版

flex-start 靠左
flex-end 靠右
center 置中
space-between 彼此相同間隔與上層沒間隔
space-around 彼此相同間隔與上層間隔一半
space-evenly 彼此與上層相同間隔

align-items:以交錯軸線排版

flex-start 向上對齊
flex-end 向下對齊
center 中線對齊
baseline 對齊基線
stretch 延伸充滿 flexbox

align-self:個別調整

flex-start
flex-end
center
baseline
stretch

align-content:多行調整

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch

flex-flow

<flex-direction> <flex-wrap>

flex-direction

row 橫向
row-reverse 橫向反序
column 直向
column-reverse 直向反序

flex-wrap

nowrap 不分行
wrap 分行
wrap-reverse 分行並且反序

order

<integer> (...-1,0,1...)


#flex #css







Related Posts

MTR04_0812

MTR04_0812

CI/CD(Github Action)

CI/CD(Github Action)

MTR04_0712

MTR04_0712


Comments