CSS width 與 height 屬性的響應式值- fill-available 與 fit-content

CSS3 在 width 與 height 屬性多了幾個值可以用來配合響應式的網站 UI，來看一下用法與說明。

1. fill-available

設定 fill-available 可以把空間給填滿，先看簡單的用法：

先準備 html：

<div class="box">
  <div class="fill-available">
    階層式樣式表是一種用來為結構化文件添加樣式的電腦語言，由W3C定義和維護。
  </div>
</div>

接著設定 CSS：

.box{
  height: 200px;
}
.fill-available {
    display: inline-block;
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;
    width: fill-available;
    background-color: pink;
}

裡面那一層設定 display 為 inline-block，本來寬度應該是跟內容一樣寬，但當設定為 width: fill-available 的時候，就會延伸到跟母容器一樣寬了。

用在高度的話，就能實現內容是一樣高的 UI 了。

<div class="container" >
  <div class="box">
    CSS
  </div>
  <div class="box">
    javascript
  </div>
</div>

.container{
  height: 120px;
}
.box {
  display: inline-block;
  width: 100px;
  height: -webkit-fill-available;
  height: -moz-fill-available;
  height: -moz-available;
  height: fill-available;
  background-color: pink;
}

這樣每一塊就可以等高了，不過 firefox 感覺沒有支援高度的 chrome 是可以執行的。

2. fit-content

fit-content 則是相對的可以讓寬度變得跟內容一樣。

<div class="box">
  Hello world.
</div>
<div class="box">
  I'm Tom.
</div>

所以如果像上面的 html，我們給他一個底色後，本來應該是會延伸到跟母容器一樣寬，但當加了 width: fit-content 之後，就會變得跟內容一樣寬了。

.box{
  margin: 10px;
  background: pink;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

而又因為區塊還是 block，所以會自動換行，所以我們可以再設定 margin: auto 的方式讓區塊置中。

.box{
  margin: 10px;
  background: pink;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

不過一樣在 firefox 沒辦法置中，所以要用這個屬性還是可以再考慮一下。