【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】

---

1. available 属性值

• available表示 撑满可用空间 ⇒ 自动填满 剩余的空间。
• available关键字 可以让元素的100%自动填充特性 不仅仅在 块级元素上，也可以应用在其他元素。如 内联块级元素 display: inline-block;
  • ❶ display: inline-block;
    • 
  • ❶ display: inline-block; + ❷ width: -moz-available; ⇒ 宽度100%自动填充。
    • 

---

2. min-content 属性值

• min-content 表示采用 内部元素的 最小宽度值中的 最大值 作为最终容器的宽度。
  • width: min-content; ⇒ 宽度表示的并不是 内部那个宽度小就是那个宽度，而是，采用各个内部元素 ❶ 最小宽度值中 ❷ 最大的 那个元素的宽度 作为最终容器的宽度。
  • ① 替换元素，例如 图片的最小宽度值 ⇒ 是 ❶ 图片呈现的宽度。
  • ② 对于文本元素，如果全部是中文 ⇒ 最小宽度值 就是 ❶ 一个中文字 的宽度值；
    • 
  • ③ 如果包含英文，因为 默认英文单词不换行 ⇒ 所以，最小宽度 可能就是里面 ❶ 最长的英文单词的宽度。
    • 
  • 示例1: 容器的宽度 = 指定值: width: 50%;
    • 
  • 示例2: 容器宽度 = 由各内部元素的最小宽度的 最大值决定:
    • width: min-content; ⇒ 内部元素 最小宽度值中的最大值 是图片的宽度 ⇒ 容器的宽度 = 图片的宽度
    • 
• html

<div class="box">
    <img src="images/lizard.png" alt="">
    <p>蜥蜴 (Lizard)，俗称“四脚蛇”又称“蛇舅母”，在世界各地均有分布。属于冷血爬虫类，其种类繁多，在地球上分布大约有3000种左右，我国已知的有150余种。</p>
</div>

• css

.box{
    margin: 10px;
    padding: 10px;
    border: dashed 2px green;
    width: 50%;
    width: min-content;/*内部元素 最小宽度值中的最大值 是图片的宽度  ⇒  容器的宽度 = 图片的宽度*/
}

---

3. max-content

• max-content 表示采用 内部元素的 宽度值最大 的那个元素的宽度 作为最终容器的宽度。
  • ① 如果出现文本 ⇒ 则相当于 文本不换行。文本 也不会 随着窗口的缩放而 换行。
  • 示例1: 容器的宽度 = 较大的元素宽度 = 文本宽度: width: max-content; ⇒ 文字的宽度比图片大时 ⇒ 容器的宽度 随着文字的长度变化的 且不换行。
    • 
    • 
  • 示例2: 容器的宽度 = 较大的 元素的宽度 = 图片的宽度: 图片比文字的宽度大时 ⇒ 容器采用 容器的宽度。
    • 

.box{
    margin: 10px;
    padding: 10px;
    border: dashed 2px green;
    width: 50%;
    width: max-content;

}

---

4. fit-content 属性值

• 收缩到 内容尺寸: fit-content ⇒ shrink-to-fit,收缩到适应内容,需要时 会换行。
• max-content 和 fit-content的区别
  • 当元素内容 没有超出行宽的时候 ⇒ 最终的宽度 都是内容的宽度。
  • 而元素内容 超出行宽的时候 ⇒
    • max-content的表现是 ❶ 不换行，出现 ❷ 横向滚动条。
      • 
    • 示例1: 不会随着窗口的缩小 ⇒ 而换行。
      • 
    • fit-content的表现是 ❶ 会换行。
      • 
      • 示例2: 会随着窗口的缩小 ⇒ 而换行。
        • 

.box{
    margin: 10px;
    padding: 10px;
    border: dashed 2px green;
    width: 50%;

}
.box p{
    width: max-content;
    width: fit-content;
    width: -moz-fit-content;

}

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭