> ## Content Index
> Fetch the complete content index at: https://blog.hinablue.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# [12th 鐵人賽] Flexbox 的使用姿勢 Part 4, Day 10
- URL: https://blog.hinablue.me/12th-ithome-ironman-day-10/
- Published: 2020-09-24T15:30:04.000Z
- Updated: 2026-07-06T18:40:34.000Z
- Author: Hina Chen
- Tags: CSS, ITHome, 鐵人賽, 2020, Media Query, Grid Layout, Grid System, Flexbox

## 各種對齊方式

前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。

- `justify-content` 水平方向的對齊控制。
- `align-items` 垂直方向的對齊控制，需要有 `height` 設定才看得出效果。
- `getBoundingClientRect()` 拿到子元件的 **所有座標點都不是你想的那個樣子**。
- 元件的 `margin` 會算入自身尺寸， **不會出現** 像是一般區塊元件 `margin` 會互相交疊的情況。
- 無論哪個方向所產生的間距（*gap*）都是瀏覽器運算結果，無法人為控制。
- 子元件若為區塊元件（Block Box），當中若有大於子元件的內容，會干擾子元件尺寸。
- 子元件若為 Flex 元件（Flexbox），當中文字內容會溢出子元件。
- 子元件若為 Flex 元件（Flexbox），圖片元件若無特殊設定，會被壓縮成奇怪尺寸。

我解釋一下 *壓縮成奇怪尺寸* 會變成什麼樣子，

![](https://blog.hinablue.me/content/images/2020/09/2020-12th-ironman-17.png)

另外，那個 `-reverse` 的斷行方式，會將 `flex-start` 與 `flex-end` 的效果 **相反**。請注意，是 **相反**。

---

## 那個順序

> `order` 收工！

在 Flex 元件當中，可以使用 `order` 來定義你想要的 **順序**。然後，當你使用了 `order` 的設定時，你的 **所有** 元件都要加上去，才會是你想要的順序。在 w3c 的 [定義](https://www.w3.org/TR/css-flexbox-1/?ref=blog.hinablue.me#order-property) 中，初始值會是 `0`。所以，如果你有四個元件，然後只設定了其中一個，那他不是放在第一，就是在最後。

```
/* 當其他元件都沒有設定 order 的時候 */
.item-3 {
    order: -1; /* 永遠在第一個 */
    order: 1; /* 永遠在最後一個 */
}

```

然後 `-reverse` 的斷行方式並 **不會影響** 排序的設定，也就是說，他不會像是對齊方式那樣被反過來看。

---

## 垂直方向的事情

前面絕大部分的情況都是在講 `row` 這個方向，也就是水平方向的排列方式。倘若今天想使用垂直方向來排列，你還是需要留意一些事情。

- `wrap` 跟 `wrap-reverse` 要在容器有限制高度的情況下，才會發生。
- `align-*` 跟 `justify-*` 兩個應用的軸向互換。
- 容器內部元件因為 `align-items` 換為 X 軸，所以變為 `width` 屬性覆蓋。
- `baseline` 對齊方式無效果。
- 換行的觸發條件是 `height` 發生碰撞。
- 不要幻想 `flex-basis: 100%;` 會幫你換行，他不會（請參考我之前的 [文章](https://blog.hinablue.me/masonry-layout-howto/)）。

如果你看過我之前關於換行這件事情，我這邊提供一個解法。當你的容器 **有固定高度** 的時候，基於 `height` 發生碰撞就會換行的這個條件，這個時候 `flex-basis: 100%;` 就會發生效果。我把那個地方具現化讓大家看一下，

![](https://blog.hinablue.me/content/images/2020/09/2020-12th-ironman-18.png)

> 但是！通常我們的外部容器，都是靠內部高度將自身的高度撐開。所以，在一般的情境下，沒有容器會需要一個固定，或最大高度的設定。

這也就是為何，在容器會隨著內容而變動高度（`height`）的時候，`flex-basis: 100%` 會失效的原因。因為在這種情況下，容器本身的高度並不具有參考性，所以所謂的 `100%` 的設定也等於是 `0` 的概念，具體來說，你設定任何相對於父容器的寫法，都會得到 `0` 這個結果。

當然，你也可以寫 `flex-basis: 100vh`，然後你就會獲得一個父容器增高了 `100vh` 的結果。

---

## 所以說那個手機版

具體看來，如果撇除（可能也不需要）斷行的問題，行動裝置在排版上，很適合使用 `column` 的方式來製作，這是沒有太大問題的。所以有的設計師，或前端工程師，或前端設計師，就是那個寫網頁的（像是我），會從 `column` 作為一個開始。

```
.main {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 約莫過了 N 行 CSS 幹話 */

@media screen and (min-width: 32rem) {
    .main {
        flex-flow: row wrap;
    }
}

```

歐，你問我 CSS 怎麼講幹話？

```
.mdfk {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;

    /* w3c 建議使用以下方式取代 */
    flex: 0 0 100%;
}

```