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>