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

1.available 属性值

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

2.min-content 属性值

• min-content表示采用 内部元素的 最小宽度值中的 最大值 作为最终容器的宽度
• width: min-content; ⇒ 宽度表示的并不是 内部那个宽度小就是那个宽度，而是，采用各个内部元素最小宽度值中最大的那个元素的宽度 作为最终容器的宽度。

❶ 对于文本元素，如果全部是中文 ⇒ 最小宽度值 就是一个中文字的宽度值，如果包含英文，因为默认英文单词不换行 ⇒ 所以，最小宽度 可能就是里面最长的英文单词的宽度

image.png

image.png

❷ 容器的宽度 = 指定值: width: 50%;

image.png

❸ 容器宽度 = 由各内部元素的最小宽度的 最大值决定。 width: min-content; ⇒ 内部元素 最小宽度值中的最大值 是图片的宽度 ⇒ 容器的宽度 = 图片的宽度；

image.png

3.max-content 属性值

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

4.fit-content 属性值

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

如果帮组到您，请举小手手赞一下，笔芯 ❤❤❤
转自：https://blog.csdn.net/VickyTsai/article/details/104007576