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

CSS3四個自適應關鍵字——fill-available、max-content、min-content、fit-content，css3fill-available
前面的話

　　一般地，有兩種自適應：撐滿空閑空間與收縮到內容尺寸。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>