https://tutorial.jumpdesign.tw/

🚀 FLEXBOX LAYOUT 彈性佈局

*display: flex | inline-flex;*

👀  定義父層為彈性區塊，使父層提供彈性環境給所有子層。

✏️ 彈性區塊 | display: flex;

• 元素顯示形態：彈性區塊。
• 寬高樣式設定：有支援。
• 未設定寬高時：父元素-依原屬性(flex控制子元素，不控制元素本身)。 子元素-主軸方向抓取內容尺寸，副軸方向自動延展。

✏️ 行內彈性區塊 | display: inline-flex;

• 元素顯示形態：行內彈性區塊。
• 寬高樣式設定：有支援。
• 未設定寬高時：寬高自動抓取內容尺寸。

// 註 1：每個區塊於網頁中會佔用一個空白的間距。 // 註2：主軸方向屬性無效，副軸方向屬性有效。

👀  Flexbox 父層(容器元素)

    *定義父層為彈性區塊，使父層提供彈性環境給所有子層，僅對下一層子層作用。*

✏️ 彈性主軸方向 | flex-direction

*flex-direction: row /* 預設值 */ | row-reverse | column | column-reverse;*

📍 主軸、副軸（交叉軸）基本觀念

  *主軸方向抓內容尺寸，副軸方向尺寸自動延展*

📍 Flex Direction 主軸彈性方向

  *建立父層容器內主軸方向(水平或垂直/正向或逆向)*