## Flex [TOC] ---- ### 簡介 ```html <style> .container { display: flex; /* display: inline-flex; */ /* 設為 Flex 布局以后，子元素的 `float` 、`clear` 和 `vertical-align` 屬性將失效。 */ } </style> <div class="container"> <div class="item"></div> <div class="item"></div> ... </div> ``` 彈性布局，容器中項目的寬度、高度可以根據容器的大小而自動伸縮，故稱為 “彈性布局”。 傳統的彈性布局，依靠 `width: auto | 100%` 這類非固定值的屬性值，而 flex 有更靈活的方式來控制項目如何填充容器以及布局。 本文檔主要內容是對 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 、 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 的精簡整理，方便快速查閱。 ---- ### 容器屬性 #### flex-direction ```css .container { flex-direction: row | row-reverse | column | column-reverse; } ```  控制主軸的方向，默認值 `row` 表示 橫向的 從左到右。 ---- #### flex-wrap ```css .container { flex-wrap: nowrap | wrap | wrap-reverse; } ```  定義項目在容器內是否能換行（當一行放不下時），默認值 `nowrap` 表示不換行。 ---- #### justify-content ```css .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } ```  定義項目沿主軸的對齊方式，可決定如何分配剩余空間，默認值 `flex-start`。 ---- #### align-items ```css .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } ```  可視為交叉軸的 `justify-content` 版本。定義了項目沿交叉軸的對齊方式（上下對齊），默認值 `stretch` 表示拉伸高度，如果項目未設置高度或設為 `auto`，則項目將占滿整個容器的高度。 ---- #### align-content ```css .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } ```  **僅對多行項目有效**，多行時定義項目沿交叉軸的布局方式，默認值 `flex-start`。 ---- #### gap ```css .container { gap: 10px; gap: 10px 20px; /* row-gap column-gap */ row-gap: 10px; column-gap: 20px; } ```  定義項目之間的間隔大小（左右和上下的空間間距，僅項目之間的間距，而不是與容器間的空間）。因為軸向對齊的影響，所以此屬性可認為是最小間距配置。 請注意，為了便于展示效果，本文的示例圖默認都是有 `gap` 值的效果。 ---- ### 項目屬性 #### order ```css .item { order: 5; /* default is 0 */ } ```  定義項目的排序，默認情況下項目的 `order` 屬性都為 0，彈性項目按源代碼順序排列。（數值越小，排列越靠前） ---- #### flex-grow ```css .item { flex-grow: 2; /* default 0 */ } ```  定義項目的放大比例，**默認值 0 即如果存在剩余空間，也不放大**（負數無效）。它決定了項目如何分配彈性容器的剩余空間。 如果所有項目都將 `flex-grow` 設置為 1 ，則容器中的剩余空間將平均分配給所有子項。如果其中一項的值為 2 ，則該項將占用其他任一項目空間的兩倍（或者至少會嘗試）。 ---- #### flex-shrink ```css .item { flex-shrink: 3; /* default 1 */ } ```  類似 `flex-grow` 屬性，定義了項目的縮小比例，**默認值 1，即如果空間不足，項目將縮小**（負數無效）。 如果所有項目的 `flex-shrink` 屬性都為 1，當空間不足時，都將等比例縮小。如果一個項目的 `flex-shrink` 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。 `flex-wrap: wrap;` 換行時，空間不足 的情況是指一行不足以放一個項目的情況。 如果不換行，也不允許縮小，那么項目將在一行溢出到容器外（此時用 overflow 控制溢出效果）。 ---- #### flex-basis ```css .item { flex-basis: <length> | auto; /* default auto */ } ```  定義項目的默認寬度，默認值 `auto`，可以設為跟 `width` 屬性一樣的值（比如350px），則項目將占據固定空間。 當項目同時設置 `width` 屬性時，以 `flex-basis` 優先級高為準，但當 `flex-basis: auto` 時，則以 `width` 屬性為準。 `flex-basis: 0 || 0%` 等同 `width: min-content`。 ---- #### align-self ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ```  允許項目覆蓋由 `align-items` 指定的對齊方式。 > 注意， `float` 、 `clear` 和 `vertical-align` 對彈性項目沒有影響。 ---- ### 屬性簡寫 #### flex-flow ```css .container { flex-flow: column wrap; } ``` `flex-direction` 和 `flex-wrap` 屬性的簡寫，它們共同定義了 Flex 容器的主軸和交叉軸。默認值 `row nowrap`。 ---- #### flex ``` .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } ``` 這是 `flex-grow` 、`flex-shrink` 、 `flex-basis` 的簡寫。第二個和第三個參數（ `flex-shrink` 和 `flex-basis` ）是可選的。默認值為 `0 1 auto`。 注意，如果省略了 `flex-basis` 屬性，則會將其更改為 `0%`： ```css flex: 5; flex-grow: 5; flex-shrink: 1; flex-basis: 0%; ``` > `.item { margin-right: auto; }` 可以影響 flex 項目的空間分配，這點很有用，可以產生讓項目右側就像多出來一個 `flex-grow: 1;` 的項目一樣的效果。 ---- ### 柵格系統實現 [Flexbox 打造柵格系統 - 知乎](https://zhuanlan.zhihu.com/p/21887541) 柵格系統要素：容器，項目，裝訂線（項目間距）。這些在 flex 容器中渾然天成，所以用 flex 實現12柵格系統就非常簡單了。 ```css .container { display: flex; justify-content: flex-star gap: 15px; padding: 15px; } .col-1 { flex: 0 0 8.33333%; } ... .col-3 { flex: 0 0 25%; } ... .col-12 { flex: 0 0 100%; } ```