1.available 屬性值

• available 表示 撐滿可用空間 ? 自動填滿 剩余的空間
  available 關(guān)鍵字 可以讓元素的100%自動填充特性 不僅僅在 塊級元素上，也可以應(yīng)用在其他元素。如內(nèi)聯(lián)塊級元素 display: inline-block;，例如：
  ? display: inline-block;
  
  image.png
  
  ? display: inline-block; width: -moz-available;? 寬度100%自動填充
  
  image.png

2.min-content 屬性值

• min-content表示采用 內(nèi)部元素的 最小寬度值中的 最大值 作為最終容器的寬度
• width: min-content; ? 寬度表示的并不是 內(nèi)部那個寬度小就是那個寬度，而是，采用各個內(nèi)部元素最小寬度值中最大的那個元素的寬度 作為最終容器的寬度。

? 對于文本元素，如果全部是中文 ? 最小寬度值 就是一個中文字的寬度值，如果包含英文，因為默認英文單詞不換行 ? 所以，最小寬度 可能就是里面最長的英文單詞的寬度

image.png

image.png

image.png

image.png

3.max-content 屬性值

• max-content 表示采用 內(nèi)部元素的 寬度值最大 的那個元素的寬度 作為最終容器的寬度。
  ? 如果出現(xiàn)文本 ? 則相當于 文本不換行。文本 也不會 隨著窗口的縮放而 換行。
  容器的寬度 = 較大的元素寬度 = 文本寬度: width: max-content; ? 文字的寬度比圖片大時 ? 容器的寬度 隨著文字的長度變化的 且不換行。
  
  image.png
  
  ? 圖片比文字的寬度大時 ? 容器采用 容器的寬度。
  容器的寬度 = 較大的 元素的寬度 = 圖片的寬度
  
  image.png

4.fit-content 屬性值

• 收縮到 內(nèi)容尺寸: fit-content ? shrink-to-fit,收縮到適應(yīng)內(nèi)容,需要時 會換行
• max-content 和 fit-content的區(qū)別：
  max-content 當元素內(nèi)容 沒有超出行寬的時候 ? 最終的寬度 都是內(nèi)容的寬度，而元素內(nèi)容 超出行寬的時候 ?是不換行，出現(xiàn)橫向滾動條。
  fit-content會換行,會隨著窗口的縮小 ? 而換行
  
  image.png

如果幫組到您，請舉小手手贊一下，筆芯 ???
轉(zhuǎn)自：https://blog.csdn.net/VickyTsai/article/details/104007576