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