🔸flex

╱🚧 under construction -> flow/writing direction

CSS ⟩ layout ⟩ display ⟩ flex

任何元素設定 display: flex 就會變成 flexbox (flex container)，而其內部的子元素會變成 flex items。Flexbox 是一種佈局模式，可以設定容器內元素的排版、對齊、空間分配等方式。

🗺️ 圖表

排版對齊

設定 flexbox 容器內元素排版的主軸、副軸與對齊方式。

設定主軸

flex-direction：設定主軸方向，

• row：設定水平為主軸方向 。

• column：設定垂直為主軸方向 。

/* flex container */
.flexbox {
    display: flex;			/*    設定為 Flex 容器   */
    flex-direction: row; 		/* ⭐ 設定主軸：水平(預設) */
    justify-content: space-around; 	/*    主軸對齊方式：分散   */
    align-items: center; 		/*    副軸對齊方式：居中   */
}

主軸對齊方式

justify-content：設定主軸的對齊方式。

• flex-start, center, flex-end, space-between, space-around, space-evenly.

/* flex container */
.flexbox {
    display: flex;			/*    設定為 Flex 容器   */
    flex-direction: row; 		/*    設定主軸：水平(預設) */
    justify-content: space-around; 	/* ⭐ 主軸對齊方式：分散   */
    align-items: center; 		/*    副軸對齊方式：居中   */
}

副軸對齊方式

align-items：設定副軸的對齊方式。

• stretch：讓子元素撐滿副軸方向的空間 (預設值)。

• flex-start：對齊副軸的起始位置。

• flex-end：對齊副軸的結束位置。

• center：在副軸上居中對齊。

• baseline：對齊文字基線。

/* flex container */
.flexbox {
    display: flex;			/*    設定為 Flex 容器   */
    flex-direction: row; 		/*    設定主軸：水平(預設) */
    justify-content: space-around; 	/*    主軸對齊方式：分散   */
    align-items: center; 		/* ⭐ 副軸對齊方式：居中   */
}

空間分配

設定 flexbox 容器內的空間分配問題：

• 有多餘空間時，子元素該如何擴張(或不擴張)。

• 空間不足時，子元素該如何壓縮(或不壓縮)。

擴展

• flex-grow：🚧

/* CSS */

壓縮

• flex-shrink：🚧

/* CSS */

子元素行為

Flex items 有以下的屬性可以設定：

• flex：設定子元素可否擴展、壓縮，自己的尺寸該如何決定等。

• flex-basis：用來定義子元素的初始尺寸。

擴展性

• flex-grow：🚧

/* CSS */

壓縮性

• flex-shrink：🚧

/* CSS */

初始尺寸

💾 程式

📁 index.html

<!-- flexbox -->
<div class="flexbox">
    <!--     flex items     -->
    <div class="item red">A</div>
    <div class="item green">B<br>B</div>
    <div class="item blue">C<br>C<br>C</div>
</div>

📁 styles.css

/* flexbox */
.flexbox {
    display: flex;			/* ⭐️ 設定為 Flex 容器   */
    flex-direction: row; 		/*    設定主軸：水平(預設) */
    justify-content: space-around; 	/*    設定主軸對齊：分散   */
    align-items: center; 		/*    設定副軸對齊：居中   */
}

/* flex items */
.item {
    /* ⭐️ flex: grow shrink basis (shortcut)  */
    /*    0 = 不, 1 = 可            */
    flex: 0 0 auto;         /* 不擴展、不壓縮、尺寸依內容或設定 */
    flex: 0 1 auto;         /* 不擴展、可壓縮、尺寸依內容或設定 */
    flex: 1 0 auto;         /* 可擴展、不壓縮、尺寸依內容或設定 */
    flex: 1 1 auto;         /* 可擴展、可壓縮、尺寸依內容或設定 */
    
    /* ⭐️ flex-basis */
    flex-basis: auto;    /* 由內容或 CSS 決定尺寸 */
}

/* 以下為 flex items 的不同設定方式 */

.item {
    flex-basis: auto; 
    width: 100px;        /* ⭐️ 結果：初始尺寸為 100px，即使內容大小不同❗️ */
}

.item {
    flex-basis: 150px;   /* 初始尺寸固定為 150px */
}

.item {
    flex-basis: content; /* ⭐️ 根據內容決定，不參考 width/height❗️ */
}

.item {
    /* ⭐️ 初始尺寸設為 0，子元素完全依賴 flex-grow 來分配剩餘空間 */
    flex-basis: 0;     /* 初始尺寸設為 0  */
    flex-grow: 1;      /* 平均分配剩餘空間 */
}

📗 參考

• Every Layout (2021)

• ChatGPT ⟩ 學習 CSS 排版

👥 相關

• 可用 <select> 來動態選擇 flexbox 的排版方式。

💈範例

範例	說明
flexbox (0.0.2)	主軸：space-around, 副軸：center
flexbox (0.0.3) ⭐	用下拉式選單選擇 flexbox 的排版方式