以下是通过学习《css3揭秘》，进而引申学习并总结的css3自适应4个关键字的思维导图。

css3自适应4个关键字.png

接下来逐个demo：

一、（充满）fill-available充满整个可用空间

• fill-available充满整个可用宽度和可用高度！
• 可实现等高布局

HTML:

//HTML
 <div class="div1">
        leaf,fill-available可充满整个可用宽度!
    </div>
    <div class="div2">
        leaf,fill-available可充满整个可用高度!
    </div>
    <div class="div3">
        <div class="inner">fill-available可以实现等高布局</div>
        <div class="inner">fill-available可以实现等高布局</div>
        <div class="inner">fill-available可以实现等高布局</div>
    </div>

CSS:

 /* 一、fill-available */
        /* fill-available充满整个可用宽度和可用高度！！ */
        .div1 {
            background-color: pink;
            display: inline-block;
            /* width: fill-available; */
            width: -webkit-fill-available;
        }

        .div2 {
            background-color: violet;
            /* height: fill-available; */
            height: -webkit-fill-available;
        }

        /*  fill-available可以实现等高布局*/
        .div3 {
            height: 100px;
            color: white;
        }

最后显示效果：

fill-available充满可用宽/高.png
fill-available可实现等高布局.png

二、（充满）max-content

• 内部元素宽度值最大的那个元素的宽度=最终容器的宽度
• 如出现文本，则相当于文本不换行
  HTML:

//HTML
<div class="div6">
        <div class="div6-1">
            hello
        </div>
        <div class="div6-2">
            max-content内部元素宽度值最大的那个元素的宽度=最终容器的宽度。则相当于文本不换行
        </div>
    </div>

CSS:

//CSS
 .div6 {
            width: -webkit-max-content;
            border: 1px solid black;
        }
        .div6-1 {
            width: 100px;
            height: 20px;
            background: lightgreen;
        }
        .div6-2 {
            background-color: aqua;
        }

最终显示效果：

max-content.png

三、(收缩)fit-content，将元素宽度收缩为内容宽度

HTML:

<div class="div4">
        leaf,fit-content可将元素宽度收缩为内容宽度
    </div>

CSS:

 .div4 {
            background-color: green;
            width: -webkit-fit-content;
            /* 使用margin:auto实现元素向内自适应同时的居中效果 */
            margin: auto;
        }

最后显示效果：

fit-content宽度收缩为内容宽度.png

四、(收缩)min-content

• 内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度

为了加深理解，min-content的应用场景可以参考我记录的另一篇文章：自适应内部元素

HTML:

//HTML
<div class="div5">
        <div class="div5-1">
            leaf,hello!
        </div>
        <div class="div5-2">
            hello,leaf,min-content,内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度
        </div>
    </div>

CSS:

//CSS
 /* 三、min-content,内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度 */
        .div5 {
            width: -webkit-min-content;
        }

        .div5-1 {
            width: 100px;
            height: 20px;
            background: lightgreen;
        }

        .div5-2 {
            background-color: aqua;
        }

最后显示效果：

min-content.png

看千遍，不如自己demo一遍！以上记录是自己的学习笔记，也许不够完善，望大神能指出，共同进步！比心

给你的