CSS サンプル: 可変個のタイルレイアウト (flex)

display: flex を使って可変個のタイルを配置します。justify-content: space-between, flex-wrap: wrap を使いながら可変個対応しようとすると、だいぶ無理が出てきます。

2列

1
2
3
4
5
6
7
8
9
10
11

3列

1
2
3
4
5
6
7
8
9
10
11

4列

1
2
3
4
5
6
7
8
9
10

5列

3列以上の場合は空枠が無いとタイルの個数によって間の余白がずれる問題があります。 3列は1個、4列は2個空枠があればよく、::before, ::after でまかなえますが、 5列は空枠を3個用意する必要があるので、::before, ::after だけでは足りません…