CSS3 四个自适应关键字

一下的四个css3自适应可用于设置宽高属性，这几个属性是分别上篇文章四个 width: auto 的宽度表现。

IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀

1. fill-available

width: fill-available 表示撑满可用空间，div元素的width表现就是fill-available自动填满剩余的空间，fill-available关键字值的价值在于，不仅仅在block水平元素上100%自动填充特性，也可以应用在其他元素上。

<style>
div{
  background-color: pink;
  display:inline-block;
  width:-webkit-fill-available;
}
</style>
<div>宽度撑满了可用宽度</div>

屏幕快照 2018-07-05 下午3.19.05.png

div元素高度撑满了可用高度

<style>
div.inner{
  background-color: red;
  height:-webkit-fill-available;
}
</style>
<div style="height: 100px;">
  <div class="inner">高度撑满了可用高度</div>
</div>

屏幕快照 2018-07-05 下午3.19.34.png

利用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>

屏幕快照 2018-07-05 下午3.20.02.png

2. fit-content

width: fit-content表示将元素宽度收缩为内容宽度

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
}
</style>
<div>元素宽度收缩为内容宽度</div>

屏幕快照 2018-07-05 下午3.20.27.png

width: fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果。

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
  margin:auto;
}
</style>
<div>水平居中</div>

屏幕快照 2018-07-05 下午3.20.55.png

3. 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>

屏幕快照 2018-07-05 下午3.21.30.png

4. 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>

屏幕快照 2018-07-05 下午3.21.57.png