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>