🔸flex

╱🚧 under construction -> flow/writing direction

任何元素設定 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;      /* 平均分配剩餘空間 */
}

範例

說明

flexbox (0.0.2)

主軸：space-around, 副軸：center

flexbox (0.0.3) ⭐

用下拉式選單選擇 flexbox 的排版方式

Previousinline NextFlexbox

Last updated 1 month ago