CSS 屬性 columns

CSS 屬性 columns 用來設置元素的列寬和列數。

通常在報紙中容易看到將文字內容拆分爲多列。

columns 是唯一可以分割內容的 CSS 佈局方法。

它是一個簡寫屬性,可在單個方便的聲明中設置 column-width 和 column-count 屬性。與所有簡寫屬性一樣,任何省略的子值都將設置爲其初始值。

要將連續的內容塊拆分爲多列,可以輕鬆便捷的實現瀑布流佈局。

<div>
  <div v-for="item in list">
    <img src="item" alt="photo">
  </div>
</div>
.cards {
  columns: 4 100px;
  padding: 1.5rem;
}
.card {
  background: #eaeaea;
  padding: 1rem;
}
.card img {
  max-width: 100%;
}

當我們嘗試調整視口寬度的時候,會自動變成三列,顯示數量將根據可用空間量而變化。在沒有媒體查詢工作的情況下,屬性自帶響應式的功能!自動生成理想的列寬和列數。

columns 屬性可以按任何順序指定爲下面列出的一個或兩個值。

column-width:理想的列寬,auto 關鍵字。

column-count:元素內容應分成的理想列數,或 auto 關鍵字。

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/gTCxnv6o1rdyooLEzK7R-g