在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

masonry-auto-flow CSS property modifies how items are placed when using masonry in CSS 栅格布局 .

句法

/* Keyword values */
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;
/* Global values */
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
masonry-auto-flow: unset;
					

This property may take one of two forms:

• A single keyword: one of pack , next , definite-first ，或 ordered
• Two keywords, for example next ordered .

值

pack

As per the default masonry algorithm, items will be placed into the track with the most room.

next

Items will be placed one after the other in the grid axis.

definite-first

Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.

ordered

Ignore any items with a definite placement, and place everything according to order-modified document order.

形式定义

Value not found in DB!

形式句法

Syntax not found in DB!
					

范例

Using the next keyword

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>
					

CSS

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}
#item1 {
  background-color: lime;
  height: 2em
}
#item2 {
  background-color: yellow;
}
#item3 {
  background-color: blue;
  height: 3em;
}
#item4 {
  background-color: red;
  height: 2.5em;
}
#item5 {
  background-color: aqua;
  height: 4em;
}
					

const selectElem = document.querySelector('select');
function changeMasonryFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("flow");
  var masonryAutoFlow = direction.value === "pack" ? "pack" : "next";
  grid.style.masonryAutoFlow = masonryAutoFlow;
}
selectElem.addEventListener('change', changeMasonryFlow);
					

结果

规范

规范	状态	注释
未知 The definition of 'masonry-auto-flow' in that specification.	未知	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

No compatibility data found. Please contribute data for "css.properties.masonry-auto-flow" (depth: 1) to the MDN 兼容性数据存储库 .

另请参阅

• Related CSS properties: align-tracks , justify-tracks

元数据

• 最后修改： Nov 5, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 栅格布局
4. 指南
   1. Basics concepts of grid layout
   2. Relationship to other layout methods
   3. Line-based placement
   4. Grid template areas
   5. Layout using named grid lines
   6. Auto-placement in grid layout
   7. Box alignment in grid layout
   8. Grids, logical values and writing modes
   9. CSS Grid Layout and Accessibility
   10. CSS Grid Layout and Progressive Enhancement
   11. Realizing common layouts using grids
5. 特性
   1. grid
   2. grid-area
   3. grid-auto-columns
   4. grid-auto-flow
   5. grid-auto-rows
   6. grid-column
   7. grid-column-end
   8. grid-column-gap
   9. grid-column-start
   10. grid-gap
   11. grid-row
   12. grid-row-end
   13. grid-row-gap
   14. grid-row-start
   15. grid-template
   16. grid-template-areas
   17. grid-template-columns
   18. grid-template-rows
6. 词汇表
   1. Grid lines
   2. Grid tracks
   3. Grid cell
   4. Grid areas
   5. Gutters
   6. Grid row
   7. Grid column