css3自适应法宝fill-available、fit-content、max-content、min-content

---

fill-available

1.fill-available表示撑满可用空间（包括高度，宽度），下面一个栗子，表示下

.box{ width: 60%; height: 500px; border: 1px solid #f00; margin: 20px auto 0; } .son{ width: -webkit-fill-available; background: #ff0; height:200px;/*高也可以是fill-available*/ }

2.fill-available对于行内块（inline-block）和块元素（block）起作用,这个要注意哦，等高布局就更简单了

.box{ height: 200px; } .son{ width: 30%; height: -webkit-fill-available; background: #f00; display: inline-block; }

fit-content

1.fit-content表示宽度缩小到内容的宽度，下面have a 栗子，go! go! go!

div{ background-color: #f00; width:-webkit-fit-content; }

max-content

max-conten表示用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。简单了说就是文字不换行。咱们去吃个栗子就ok了

.box{ width:-webkit-max-content; } .son{ background: #ff0; }

min-content

min-content表示用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。这个最小宽度值有最大什么意思，如果是图片的话最小宽度值就是图片所呈现的宽度，如果是汉字就是一个字的宽度，如果是英文就是单词的宽度，ok了。

.box{ width:-webkit-min-content; border:1px solid pink; } .brother{ width: 120px; height: 20px; background: #f00; }