CSS - `min-inline-size` 屬性

CSS 的 `min-inline-size` 屬性設定元素的最小內聯大小。內聯方向由 `writing-mode` 屬性確定。如果內容完全適合元素的內聯大小，則此屬性無效。

語法

min-inline-size: auto | length | percentage | initial | inherit;

屬性值

值	描述
auto	此值不設定寬度限制。預設值。
長度	使用長度單位（例如 px、em、rem 等）設定元素的 `min-inline-size`。
百分比	使用相對於包含元素大小的百分比值設定元素的 `min-inline-size`。
initial	將屬性設定為其預設值。
inherit	從父元素繼承此屬性。

CSS `min-inline-size` 屬性示例

以下示例說明了使用不同值的 **`min-inline-size`** 屬性。

`min-inline-size` 屬性與 `auto` 值

為了不設定元素 **`inline-size`** 的任何特定限制，我們使用 **`auto`** 值。元素的大小取決於內容的長度。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         min-inline-size: auto;
         display: inline-block;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: auto
   </h4>
   <div class="container">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
</body>
</html>

`min-inline-size` 屬性與長度值

要設定元素的內聯大小，我們可以使用長度單位（例如 px、em、rem 等）指定大小。指定的大小將應用於元素。如果內容大於元素的大小，則元素將增長以適應內容。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         margin: 10px;
         display: inline-block;
      }

      .size1 {
         min-inline-size: 400px;
      }

      .size2 {
         min-inline-size: 30em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 400px
   </h4>
   <div class="container size1">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
   <br/>
   <h4>
      min-inline-size: 30em
   </h4>
   <div class="container size2">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
</body>
</html>

`min-inline-size` 屬性與百分比值

要設定元素的內聯大小，我們可以使用百分比值（例如 10%）指定大小，該值相對於包含元素的大小。指定的大小將應用於元素。如果內容大於元素的大小，則元素將增長以適應內容。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 100px;
      }

      .container {
         display: inline-block;
         background-color: lightgreen;
      }

      .size1 {
         min-inline-size: 50%;
      }

      .size2 {
         min-inline-size: 75%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 50% (of the 
      size of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size1">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-inline-size: 75% (of the 
      size of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size2">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
</body>
</html>

`min-inline-size` 屬性與書寫模式

**`min-inline-size`** 屬性可以與 **`writing-mode`** 屬性結合使用，該屬性確定內聯方向。在水平模式下，**`inline-size`** 從左到右增長。在垂直模式下，**`inline-size`** 從上到下（或從下到上）增長。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 100px;
      }

      .container {
         display: inline-block;
         background-color: lightgreen;
         min-inline-size: 55%;
      }

      .horizontal {
         writing-mode: horizontal-lr;
      }

      .vertical {
         writing-mode: vertical-lr;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 55% (of the size of the 
      containing element); writing-mode: horizontal-lr;
   </h4>
   <div class="outer-container">
      <div class="container horizontal">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-inline-size: 55% (of the size of the 
      containing element); writing-mode: vertical-lr;
   </h4>
   <div class="outer-container">
      <div class="container vertical">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
</body>
</html>

支援的瀏覽器

屬性
`min-inline-size`	57.0	79.0	41.0	12.1	44.0

css_properties_reference.htm

列印頁面