blob: 5b7b2239c426072f62d4ffaad8974aec8374bd98 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: masonry-auto-flow
slug: Web/CSS/masonry-auto-flow
tags:
- CSS
- 実験的
- プロパティ
- リファレンス
- grid
- masonry
- masonry-auto-flow
browser-compat: css.properties.masonry-auto-flow
translation_of: Web/CSS/masonry-auto-flow
---
{{CSSRef}}
{{SeeCompatTable}}
**`masonry-auto-flow`** は CSS のプロパティで、[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)において[組積](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)を使用する際のアイテムの配置方法を変更します。
## 構文
```css
/* キーワード値 */
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;
/* グローバル値 */
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
maosnry-auto-flow: revert;
masonry-auto-flow: unset;
```
このプロパティは 2 つの形式のうちの 1 つから成ります。
- 単一のキーワード: `pack`, `next`, `definite-first`, `ordered` のうちの何れか
- 2 つのキーワード。例えば `next ordered`。
### 値
- `pack`
- : 既定の組積アルゴリズムで、アイテムは最も余裕のあるトラックに配置されます。
- `next`
- : アイテムはグリッド軸に次々と配置されていきます。
- `definite-first`
- : 既定の組積アルゴリズムのように、場所が確定しているアイテムを最初に配置してから、他の組積アイテムを配置するように表示します。
- `ordered`
- : 配置が確定しているものは無視して、すべてを order で変更した文書順に従って配置します。
## 公式定義
{{cssinfo}}
## 関連情報
{{csssyntax}}
## 例
### next キーワードの使用
#### HTML
```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
```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;
}
```
```js
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);
```
#### 結果
{{EmbedLiveSample("Using_the_next_keyword", "200px", "230px")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 関連する CSS プロパティ: {{cssxref("align-tracks")}}, {{cssxref("justify-tracks")}}
|
