# CSS 筆記

### 1. 避免表格換行

    table tr th {
        white-space: nowrap;
    }

### 2. inline-block + vertical-align 垂直置中

適用**行內元素** ( inline , inline-block )，搭配偽元素

    <div class="container">
        <div class="item"></div>   
    </div>

    .container {
        width: 300px;
        height: 300px;
        border: 2px solid green;
        text-align: center;
    }
    .container::after {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .item {
        width: 50px;
        height: 50px;
        display: inline-block;
        vertical-align: middle;
        border: 2px solid blue;
    }

### 3. fit-content 水平置中
**fit-content** 表示將元素寬度收縮為內容寬度，同時也能保持 block 狀態

    <div class="container">楊士傑我拿槍了嗎</div>

    .container {
        width: fit-content;
        margin: 0 auto;
        border: 2px solid green;
    }

### 4. Flex 內容器屬性
**flex : initial** 等同於設定 **flex : 0 1 auto**，可以理解為 flex 屬性的預設值
> flex 容器有剩餘空間時**尺寸不會增長**（flex-grow:0），flex容器尺寸不足時**尺寸會收縮變小，會換行**（flex-shrink:1），尺寸**自適應於內容**（flex-basis:auto）（行為類似 fit-content）。

**flex : 0** 等同於設定 **flex: 0 0 0%**
> 元素尺寸**不會彈性增大**、也**不會彈性變小**，也就是元素不再具有彈性。flex-basis:0% 表示固定尺寸是0，由於元素不具有彈性，因此，設定 flex:0 的元素的最終尺寸表現為**最小內容寬度**。

**flex : none** 等同於設定 **flex: 0 0 auto**
> 元素尺寸**不會彈性增大**、也**不會彈性變小**，也就是元素不再具有彈性。flex-basis:0% 表示固定尺寸是0，由於元素不具有彈性，表示固定尺寸由內容決定，由於元素不具有彈性，因此，元素內的內容**不會換行**。

**flex : 1** 等同於設定 **flex: 1 1 0%**
> 元素尺寸**可以彈性增大**，也**可以彈性變小**，具有十足的彈性，但是 flex:1 在**尺寸不足時會優先最小化內容尺寸**，適合**等分布局**。

**flex:auto** 等同於設定 **flex: 1 1 auto**。
> 元素尺寸**可以彈性增大**，也**可以彈性變小**，具有十足的彈性，但 flex:auto 在**尺寸不足時會優先最大化內容尺寸**，適合**內容自動分配寬度的場合**。

**總結**
* **flex:initial** 表示預設的 flex 狀態，無需專門設定，適合小控制元件元素的分佈佈局，或者某一項內容動態變化的佈局。
* **flex:0** 適用場景較少，適合設定在替換元素的父元素上。
* **flex:none** 適用於不換行的內容固定或者較少的小控制元件元素上，如按鈕。
* **flex:1** 適合等分佈局。
* **flex:auto** 適合基於內容動態適配的佈局。