# CSS Flexbox
{%hackmd BJrTq20hE %}
**[CSS Flexbox Layout 學習心得筆記](https://sweeteason.pixnet.net/blog/post/42781628-css-flexbox-layout-%e5%ad%b8%e7%bf%92%e5%bf%83%e5%be%97)**

**教學網站：[Flexbox Froggy](http://flexboxfroggy.com/#zh-tw)**

- flexbox彈性盒子結構：分為
1. Flex Container：flex 容器
2. Flex Item ：flex 子項目
橘色是設定為 flex 的容器，裡面有三個藍色的 flex item

## Flex Container (容器)
### container  {
- `display: flex` | inline-flex ; /*flex：容器是固定大小，inline-flex：容器會隨著內容伸縮*/ [https://ithelp.ithome.com.tw/articles/10238558](https://ithelp.ithome.com.tw/articles/10238558)

(BS)：(d-flex、d-inline-flex、d-sm-flex)   //包含響應式的變化。

    //(tailwind)
    flex	//display: flex;
    inline-flex	//display: inline-flex;

- `flex-direction: row` | row-reverse | column | column-reverse; /*row：由左到右，column：由上到下*/

(BS)：
(flex-row、flex-row-reverse)  //左到右、右到左，sm、md
(flex-column、flex-column-reverse)   //上到下、下到上

    //(tailwind)
    flex-row	//flex-direction: row;
    flex-row-reverse	//flex-direction: row-reverse;
    flex-col	//flex-direction: column;
    flex-col-reverse	//flex-direction: column-reverse;

- `flex-wrap: nowrap` | wrap | wrap-reverse; /*換行、不換行、換行且反轉*/ (RWD必用)

(BS、tailwind)：
(flex-wrap、flex-nowrap、flex-wrap-reverse)：sm、md
.flex-sm-row
- `flex-flow`：<'flex-direction'> | <'flex-wrap'> /*方向及換行的縮寫*/
- `justify-content: flex-start` | flex-end | center | space-between | space-around | space-evenly; /*水平方向(主軸、X)對齊：、、、平均分散且左右貼齊、平均分散但左右仍有留白*/

- (BS)
使用 flexbox 容器上的 justify-content 通用類別改變 flex 物件在主軸上的對齊 (x 軸開始，如果 flex-direction: column 則為 y 軸)。從 start (瀏覽器預設)，end、center、between、 around 或 evenly 中做選擇。

    <div class="d-flex justify-content-start">...</div>
    <div class="d-flex justify-content-end">...</div>
    <div class="d-flex justify-content-center">...</div>
    <div class="d-flex justify-content-sm-center">...</div>
    <div class="d-flex justify-content-between">...</div>    //靠左右
    <div class="d-flex justify-content-around">...</div>    //與左右有些距離
    <div class="d-flex justify-content-evenly">...</div>    //平均分散
        .justify-content-sm-start(響應式寫法)

    如果混用margin可以有不同的排版樣式
        <div class="d-flex bd-highlight mb-3">
            <div class="me-auto p-2 bd-highlight">Flex item</div>
            <div class="p-2 bd-highlight">Flex item</div>
            <div class="p-2 bd-highlight">Flex item</div>
        </div>

- (tailwind)

    justify-start	//justify-content: flex-start;
    justify-end	//justify-content: flex-end;
    justify-center	//justify-content: center;
    justify-between	//justify-content: space-between;
    justify-around	//justify-content: space-around;
    justify-evenly	//justify-content: space-evenly;

- `align-items: flex-start` | flex-end | center | baseline | stretch;
/*垂直方向(交錯軸、Y)對齊：依照基準線對齊、延伸至填滿整個容器，除了stretch之外，其他並不會延伸整個容器*/
- (BS)

        在 flexbox 容器上使用 align-items 工具改變橫軸上 flex 物件的對齊(y 軸開始，如果設定 flex-direction: column 則為 x 軸)，
        從 start、end、center、baseline 或是 stretch (瀏覽器預設) 中做選擇。

        <div class="d-flex align-items-start">...</div>
        <div class="d-flex align-items-end">...</div>
        <div class="d-flex align-items-center">...</div>
        <div class="d-flex align-items-baseline">...</div>
        <div class="d-flex align-items-stretch">...</div>

⭐如果元素本身為 inline 元素，要再加上 `h-100` ，例如：

        <font class="d-flex align-items-center h-100">test</font>

- (tailwind)

        items-start	//align-items: flex-start;
        items-end	//align-items: flex-end;
        items-center	//align-items: center;
        items-baseline	//align-items: baseline;
        items-stretch	//align-items: stretch;

- [align-content](https://jsfiddle.net/sweeteason/na6qt02v/): flex-start | flex-end | center | space-between | space-around | stretch;
/*==多列==對齊效果：在垂直方向置中對齊、第一行靠上，第二行靠下對齊、上下左右均勻分布、各個元素自動補滿(預設)*/

    (BS)
    <div class="d-flex align-content-start">...</div>
    <div class="d-flex align-content-end">...</div>
    <div class="d-flex align-content-center">...</div>
    <div class="d-flex align-content-baseline">...</div>
    <div class="d-flex align-content-stretch">...</div>

(BS)
使用 flexbox 容器上的 align-content 通用類別將 flex 項目 一起 對齊於橫軸上。從 start (瀏覽器預設)、end、center、between、around，或 stretch 中選擇。以下為了呈現這通用類別的效果，我們強制執行 flex-wrap: wrap 並增加了 Flex 項目的數量。
( flex-sm-wrap、flex-sm-wrap-reverse )

⭐==注意！ 此特性對於單列的 Flex 項目沒有作用。==
`<div class="d-flex align-content-start flex-wrap">`

- Gap欄位間距：(flex、Grid通用)

    // BootStrap
    // ((0–5) 六個大小。這裡沒有 .gap-auto 通用類別，因為它實際上與 .gap-0 相同。)
    <div class="d-grid gap-3">
      <div class="p-2 bg-light border">Grid item 1</div>
      <div class="p-2 bg-light border">Grid item 2</div>
      <div class="p-2 bg-light border">Grid item 3</div>
    </div>

    //(tailwind)
    gap-0~96	//gap: 0px;
    gap-x-0	//column-gap: 0px;
    gap-y-0	//row-gap: 0px;

- Space Between(容器上使用，不須flex，類似上面，吃所有子元件屬性) [link](https://tailwindcss.com/docs/space)

    //(tailwind)
    space-x-0~96 > * + *	//margin-left: 0px;
    space-y-reverse > * + *	//--tw-space-y-reverse: 1;
    space-x-reverse > * + *	//--tw-space-x-reverse: 1;

## Flex Item (子項目)：
### item {
- `order: <integer>;`  /*排序(預設0)*/
- (BS)排序：有共-1~6
有0~5、此外還有響應式的 .order-first 和 .order-last 類別，它們分別透過 order: -1 和 order: 6，來更改元素的 order 順序。

    //order-
    <div class="d-flex flex-nowrap bd-highlight">
        <div class="order-3 p-2 bd-highlight">First flex item</div>
        <div class="order-2 p-2 bd-highlight">Second flex item</div>
        <div class="order-1 p-2 bd-highlight">Third flex item</div>
    </div>

- tailwind

    //(tailwind)
    order-1~12 //1-12
    order-first	//order: -9999;
    order-last	//order: 9999;
    order-none	//order: 0;

- `flex-grow`：數字，無單位，當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，預設值為 0，不會進行彈性變化，不可為負值，設為 1 則會進行彈性變化。

    //(tailwind)
    grow	//flex-grow: 1;
    grow-0	//flex-grow: 0;

    shrink	 //flex-shrink: 1;
    shrink-0 //flex-shrink: 0;

- `flex-shrink`：數字，無單位，當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
- `flex-basis`：子元素的基本大小，作為父元素的大小比較基準，預設值為 0，也因為預設值為 0，所以沒有設定此屬性的時候，會以直接採用 flex-grow 屬性，flex-basis 也可以設為 auto，如果設為 auto，就表示子元素以自己的基本大小為單位。

[範例](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)
https://ithelp.ithome.com.tw/articles/10227188
[詳細說明範例](https://www.instagram.com/p/CkLpzXuvsOC/)

(tailwind)

    basis-0~96 //rem單位
    basis-auto	//flex-basis: auto;
    basis-1/2~11/12	//flex-basis: 百分比%;
    basis-full	//flex-basis: 100%;

    <div class="flex flex-row">
      <div class="basis-1/4">01</div>
      <div class="basis-1/4">02</div>
      <div class="basis-1/2">03</div>
    </div>

屬性簡寫：`flex: flex-grow | flex-shrink | flex-basis`
- `flex: initial`：等同於 ++flex： 0 1 auto++ (預設值)
flex item 會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸，即使 container 中有剩餘空間，flex item 仍==無法延伸，但可收縮==。
- `flex: auto`：等同於 ++flex: 1 1 auto++
flex item ==可延伸與收縮==，會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。若所有 flex items 均設定 flex: auto 或 flex: none，則在 flex items 尺寸決定後，剩餘空間會被平分給 flex: auto 的 flex items。
- `flex: none`：等同於 ++flex: 0 0 auto++
flex item ==不可延伸與收縮==，會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。
- `flex: 1 1 150px;`： 最小值為150，大於150就會自動延伸
flex: `<positive-number>`：等同於 flex: `<正數>` 1 0
flex item ==可延伸與收縮==，flex-basis 為 0，故 flex item 會依據所設定的比例佔用 container 中的剩餘空間。
例如：
&emsp;flex: 2;   等同於
&emsp;flex: 2 1 0;
&emsp;&emsp;(flex-grow-1、flex-shrink-1、flex-sm-shrink-1)   //可以使用flex-fill取代，如下：
&emsp;&emsp;(flex-grow-0、flex-shrink-0)

(tailwind) [link](https://tailwindcss.com/docs/flex)

    //(tailwind)
    flex-1	//flex: 1 1 0%;自動延伸(會忽略比例延伸)
    flex-auto	//flex: 1 1 auto; (依比例延伸)
    flex-initial	//flex: 0 1 auto; (無法延伸，但可收縮)
    flex-none	//flex: none;

可以用來分配畫面占比：(1/4) & (3/4)

    <div style="flex:1;"> // 螢幕占比100%
        <div style="flex:1;">
            ratio-1/4
        </div>   
        <div style="flex:3;">
            ration-3/4
        </div>
    </div>

- `.flex-fill` 來強制設定它們的寬度與內容相等：(Bootstrap)

    <div class="d-flex bd-highlight">
        <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
        <div class="p-2 flex-fill bd-highlight">Flex item</div>
        <div class="p-2 flex-fill bd-highlight">Flex item</div>
    </div>
            ( flex-md-fill )

- `align-self: auto` | flex-start | flex-end | center | baseline | stretch;   /*(垂直方向)align-self 可以讓你為單獨的子元素設置 align-items 行為，會覆蓋父元素 align-items*/

    <div class="align-self-start">Aligned flex item</div>
    <div class="align-self-end">Aligned flex item</div>
    <div class="align-self-center">Aligned flex item</div>
    <div class="align-self-baseline">Aligned flex item</div>
    <div class="align-self-stretch">Aligned flex item</div>

        (align-self-center、align-self-sm-center)

    //(tailwind)
    self-auto	//align-self: auto;
    self-start	//align-self: flex-start;
    self-end	//align-self: flex-end;
    self-center	//align-self: center;
    self-stretch	//align-self: stretch;拉伸
    self-baseline	//align-self: baseline; 

## 絕對置中 (in 容器)

display: flex or grid;
margin: auto;