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
