CSS - column-fill 屬性

CSS column-fill 屬性負責平衡元素在分割成多列時內容的分佈。

語法

column-fill: auto | balance | initial | inherit;

屬性值

值	描述
auto	這將導致列的順序填充。內容只佔用所需的空間。這可能導致某些列保持為空。
balance	它均勻地將內容分佈到各列，確保每列儘可能填充相同的內容，從而建立更平衡的佈局。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Column Fill 屬性示例

以下示例使用不同的值解釋了column-fill 屬性。

使用 Auto 值的 Column Fill 屬性

為了讓內容自然地流入列中，而無需強制均勻分佈，如果在填充所有列之前內容已用盡，則列中的剩餘空間將留空，我們使用auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: auto
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and practical
      examples for learners of all levels. With 
      interactive coding exercises and comprehensive
      guides, TutorialsPoint aims to facilitate 
      effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

使用 Balance 值的 Column Fill 屬性

為了讓內容分佈在定義的列數中，使得每列包含相同數量的內容，我們使用balance 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: balance;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: balance
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and 
      practical examples for learners of all levels. 
      With interactive coding exercises and 
      comprehensive guides, TutorialsPoint aims to 
      facilitate effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

支援的瀏覽器

屬性
column-fill	50.0	10.0	52.0	10.0	37.0

css_properties_reference.htm

列印頁面