🔸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)

  • flex-direction

🛠 工具

• Flexbox Froggy ❤️❤️

👥 相關

• align-items

• flex-wrap

💾 程式

• codepen ⟩ flex-direction