CSS - fit-content 屬性

CSS 中的fit-content屬性用於根據內容指定容器的大小，但大小不超過最大值。它通常與min-content和max-content值結合使用，以建立靈活且響應式的佈局。

實際上，這意味著框架利用可用空間，確保它永遠不會超過max-content的大小。
當在佈局盒中與width、height、min-width、min-height、max-width和max-height的指定尺寸一起使用時，最小和最大尺寸指的是內容的尺寸。

此屬性在您希望容器根據其內容擴充套件或收縮，但仍需設定上限以防止其變得過寬的情況下特別有用。

語法

width: fit-content;
block-size: fit-content;

CSS fit-content() - 盒尺寸

接下來

在給出的示例中，box 類width屬性的fit-content函式動態地調整盒子的寬度以適應內容。
它確保盒子適應內容，允許盒子在保持容納內容所需的最小寬度的同時增長或縮小。

<html>
<head>
<style>
   body {
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
   }

   .box {
      width: fit-content;
      padding: 20px;
      background-color: #3498db;
      border:2px solid black;
      color: white;
      font-size: 18px;
      margin-bottom:5px;
   }
</style>
</head>
<body>
   <div class="box">
      Small content!
   </div>
   <div class="box">
      Some more content shows how the box expands!
   </div>
   <div class="box">
     Lot of content shows how the box expands even more !Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

列印頁面