๐ธflex-direction
๐ฐ CSS โฉ Layout โฉ Flexbox
flex-direction defines the main axis. ( ๐๐ป wrap-reverse: will reverse cross axisโ๏ธ)
row,row-reverse,column,column-reverse.
row-reverse
โญ๏ธ row-reverse and column-reverse will also reverse flex-start and flex-end tooโ๏ธ
็ถๆๅไฝฟ็จ flex-direction: row-reverse ๆ๏ผ้็ถ main axis ๆนๅๆน็บใๅๅทฆใ๏ผไฝ cross axis ็ๆนไพ็ถใๅไธใ๏ผไธฆๆฒๆๅ ็บๆๅไฝฟ็จ row-reverse ่ๆน็บใๅไธใใ
โญ๏ธ Notice: when flex-direction set to row-reverse or column-reverse, flex-start and flex-end are also reversedโ๏ธ
short-hand๏ผ
flex-fow: ยซflex-directionยป ยซflex-wrapยป๐ค ๅ้ก๏ผใ row/column-reverse ๆๆน่ฎ main axis ็ๆนๅ๏ผ้ฃๆไธๆๅๆๆน่ฎ cross axis ็ๆนๅโใ
๐ก ็ญๆก๏ผใ ไธๆโ๏ธใ( โญ๏ธ ไฝ wrap-reverse ๆๆน่ฎ cross axis ็ๆนๅโ๏ธ)
CSSTricks โฉ flex-direction
MDN โฉ CSS โฉ
flex-wrap (default: nowrap)
Flexbox Froggy โค๏ธโค๏ธ
codepen โฉ flex-direction
Last updated