1.available 屬性值
-
available表示 撐滿可用空間 ? 自動(dòng)填滿 剩余的空間
available關(guān)鍵字 可以讓元素的100%自動(dòng)填充特性 不僅僅在 塊級(jí)元素上妒貌，也可以應(yīng)用在其他元素通危。如內(nèi)聯(lián)塊級(jí)元素display: inline-block;，例如：
?display: inline-block;
image.png
?display: inline-block; width: -moz-available;? 寬度100%自動(dòng)填充
image.png
2.min-content 屬性值
-
min-content表示采用 內(nèi)部元素的 最小寬度值中的 最大值 作為最終容器的寬度 -
width: min-content;? 寬度表示的并不是 內(nèi)部那個(gè)寬度小就是那個(gè)寬度灌曙，而是菊碟，采用各個(gè)內(nèi)部元素最小寬度值中最大的那個(gè)元素的寬度 作為最終容器的寬度。
? 對(duì)于文本元素在刺，如果全部是中文 ? 最小寬度值 就是一個(gè)中文字的寬度值逆害，如果包含英文，因?yàn)槟J(rèn)英文單詞不換行 ? 所以蚣驼，最小寬度 可能就是里面最長(zhǎng)的英文單詞的寬度
image.png
image.png
? 容器的寬度 = 指定值:
width: 50%;
image.png
? 容器寬度 = 由各內(nèi)部元素的最小寬度的 最大值決定魄幕。
width: min-content; ? 內(nèi)部元素 最小寬度值中的最大值 是圖片的寬度 ? 容器的寬度 = 圖片的寬度；
image.png
3.max-content 屬性值
-
max-content表示采用 內(nèi)部元素的 寬度值最大 的那個(gè)元素的寬度 作為最終容器的寬度颖杏。
? 如果出現(xiàn)文本 ? 則相當(dāng)于 文本不換行纯陨。文本 也不會(huì) 隨著窗口的縮放而 換行。
容器的寬度 = 較大的元素寬度 = 文本寬度: width: max-content; ? 文字的寬度比圖片大時(shí) ? 容器的寬度 隨著文字的長(zhǎng)度變化的 且不換行留储。
image.png
? 圖片比文字的寬度大時(shí) ? 容器采用 容器的寬度翼抠。
容器的寬度 = 較大的 元素的寬度 = 圖片的寬度
image.png
4.fit-content 屬性值
- 收縮到 內(nèi)容尺寸: fit-content ? shrink-to-fit,收縮到適應(yīng)內(nèi)容,需要時(shí) 會(huì)換行
- max-content 和 fit-content的區(qū)別：
max-content當(dāng)元素內(nèi)容 沒(méi)有超出行寬的時(shí)候 ? 最終的寬度 都是內(nèi)容的寬度，而元素內(nèi)容 超出行寬的時(shí)候 ?是不換行获讳，出現(xiàn)橫向滾動(dòng)條阴颖。
fit-content會(huì)換行,會(huì)隨著窗口的縮小 ? 而換行
image.png
如果幫組到您，請(qǐng)舉小手手贊一下丐膝，筆芯 ???
轉(zhuǎn)自：https://blog.csdn.net/VickyTsai/article/details/104007576
