CSS3四個自適應關鍵字——fill-available、max-content、min-content、fit-content

前面的話

　　通常地，有兩種自適應：撐滿空閒空間與收縮到內容尺寸。CSS3將這兩種狀況分別定義爲'fill-availabel'和'fit-content'。除此以外 ，還新增了更細粒度的'min-content'和'max-content'。這四個關鍵字可用於設置寬高屬性。本文將詳細介紹CSS3中的這四個自適應關鍵字

　　[注意]IE瀏覽器不支持，webkit內核瀏覽器需添加-webkit-前綴

 

fill-available

　　width:fill-available表示撐滿可用空間

　　舉例來講，頁面中一個<div>元素，該<div>元素的width表現就是fill-available自動填滿剩餘的空間

　　出現fill-available關鍵字值的價值在於，可讓元素的100%自動填充特性不單單在block水平元素上，也能夠應用在其餘元素

　　下面的例子中，inline-block元素寬度撐滿了可用寬度

<style>
div{
  background-color: pink;
  display:inline-block;
  width:-webkit-fill-available;
}
</style>
<div>小火柴的藍色理想</div>

　　相似地，高度也有此特性

　　下面的例子中，div元素高度撐滿了可用高度

<style>
div.inner{
  background-color: pink;
  height:-webkit-fill-available;
}
</style>
<div style="height: 100px;">
  <div class="inner">小火柴的藍色理想</div>
</div>

【等高佈局】

　　因而，利用fill-available能夠輕鬆地實現等高佈局

<style>
.inner{
  width:100px;
  height:-webkit-fill-available;
  margin:0 10px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
}
</style>
<div style="height: 100px;">
  <div class="inner">HTML</div>
  <div class="inner">CSS</div>
  <div class="inner">JS<br>jQyery<br>Vue</div>
</div>

 

fit-content

　　width:fit-content表示將元素寬度收縮爲內容寬度

　　下面是一個實例

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
}
</style>
<div>小火柴的藍色理想</div>

【水平居中】

　　width:fit-content能夠實現元素收縮效果的同時，保持本來的block水平狀態，因而，就能夠直接使用margin:auto實現元素向內自適應同時的居中效果了

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
  margin:auto;
}
</style>
<div>小火柴的藍色理想</div>

　　相似地，高度也有此特性，但不經常使用

 

min-content

　　width:min-content表示採用內部元素最小寬度值最大的那個元素的寬度做爲最終容器的寬度

　　首先，要明白這裏的「最小寬度值」是什麼意思。替換元素，例如圖片的最小寬度值就是圖片呈現的寬度，對於文本元素，若是所有是中文，則最小寬度值就是一箇中文的寬度值；若是包含英文，由於默認英文單詞不換行，因此，最小寬度可能就是裏面最長的英文單詞的寬度

<style>
.outer{
  width:-webkit-min-content;
}
</style>
<div class="outer">
  <div style="height:10px;width:100px;background:lightgreen"></div>
  <div style="background-color: pink;">小火柴的藍色理想</div>
</div>

 

max-content

　　width:max-content表示採用內部元素寬度值最大的那個元素的寬度做爲最終容器的寬度。若是出現文本，則至關於文本不換行

<style>
.outer{
  width:-webkit-max-content;
  border:1px solid black;
}
</style>
<div class="outer">
  <div style="height:10px;width:100px;background:lightgreen"></div>
  <div style="background-color: pink;">小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想小火柴的藍色理想</div>
</div>