display:grid; grid-auto-flow:row; 时 align-content的效果
代码:
<section><fieldset><legend></legend><div style="display: grid; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(106, 180, 200);">div</div><section style="background-color: rgb(15, 249, 114);">secction</section><article style="background-color: rgb(220, 238, 23);">article</article><label style="background-color: rgb(155, 31, 98);">label</label><span style="background-color: rgb(88, 45, 132);">span</span></div></fieldset><fieldset><legend>space-between</legend><div style="display: grid; align-content: space-between; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(212, 108, 186);">div</div><section style="background-color: rgb(239, 149, 244);">secction</section><article style="background-color: rgb(81, 102, 68);">article</article><label style="background-color: rgb(177, 233, 210);">label</label><span style="background-color: rgb(152, 110, 13);">span</span></div></fieldset><fieldset><legend>space-around</legend><div style="display: grid; align-content: space-around; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(250, 117, 191);">div</div><section style="background-color: rgb(118, 33, 236);">secction</section><article style="background-color: rgb(252, 232, 121);">article</article><label style="background-color: rgb(240, 80, 59);">label</label><span style="background-color: rgb(109, 89, 252);">span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style="display: grid; align-content: space-evenly; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(191, 14, 234);">div</div><section style="background-color: rgb(4, 191, 204);">secction</section><article style="background-color: rgb(65, 209, 55);">article</article><label style="background-color: rgb(44, 32, 68);">label</label><span style="background-color: rgb(74, 13, 158);">span</span></div></fieldset><fieldset><legend>stretch</legend><div style="display: grid; align-content: stretch; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(112, 232, 28);">div</div><section style="background-color: rgb(61, 207, 213);">secction</section><article style="background-color: rgb(201, 5, 31);">article</article><label style="background-color: rgb(80, 121, 66);">label</label><span style="background-color: rgb(18, 69, 230);">span</span></div></fieldset><fieldset><legend>start</legend><div style="display: grid; align-content: start; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(155, 68, 233);">div</div><section style="background-color: rgb(195, 186, 120);">secction</section><article style="background-color: rgb(42, 81, 254);">article</article><label style="background-color: rgb(83, 107, 63);">label</label><span style="background-color: rgb(145, 183, 232);">span</span></div></fieldset><fieldset><legend>center</legend><div style="display: grid; align-content: center; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(193, 108, 158);">div</div><section style="background-color: rgb(196, 147, 155);">secction</section><article style="background-color: rgb(69, 201, 237);">article</article><label style="background-color: rgb(251, 147, 181);">label</label><span style="background-color: rgb(242, 28, 56);">span</span></div></fieldset><fieldset><legend>end</legend><div style="display: grid; align-content: end; border: 1px solid black; grid-auto-flow: row; height: 200px;"><div style="background-color: rgb(238, 81, 158);">div</div><section style="background-color: rgb(124, 19, 102);">secction</section><article style="background-color: rgb(203, 140, 243);">article</article><label style="background-color: rgb(252, 98, 239);">label</label><span style="background-color: rgb(89, 183, 233);">span</span></div></fieldset></section>
<section><fieldset><legend></legend><div style=“display: grid; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(106, 180, 200);”>div</div><section style=“background-color: rgb(15, 249, 114);”>secction</section><article style=“background-color: rgb(220, 238, 23);”>article</article><label style=“background-color: rgb(155, 31, 98);”>label</label><span style=“background-color: rgb(88, 45, 132);”>span</span></div></fieldset><fieldset><legend>space-between</legend><div style=“display: grid; align-content: space-between; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(212, 108, 186);”>div</div><section style=“background-color: rgb(239, 149, 244);”>secction</section><article style=“background-color: rgb(81, 102, 68);”>article</article><label style=“background-color: rgb(177, 233, 210);”>label</label><span style=“background-color: rgb(152, 110, 13);”>span</span></div></fieldset><fieldset><legend>space-around</legend><div style=“display: grid; align-content: space-around; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(250, 117, 191);”>div</div><section style=“background-color: rgb(118, 33, 236);”>secction</section><article style=“background-color: rgb(252, 232, 121);”>article</article><label style=“background-color: rgb(240, 80, 59);”>label</label><span style=“background-color: rgb(109, 89, 252);”>span</span></div></fieldset><fieldset><legend>space-evenly</legend><div style=“display: grid; align-content: space-evenly; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(191, 14, 234);”>div</div><section style=“background-color: rgb(4, 191, 204);”>secction</section><article style=“background-color: rgb(65, 209, 55);”>article</article><label style=“background-color: rgb(44, 32, 68);”>label</label><span style=“background-color: rgb(74, 13, 158);”>span</span></div></fieldset><fieldset><legend>stretch</legend><div style=“display: grid; align-content: stretch; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(112, 232, 28);”>div</div><section style=“background-color: rgb(61, 207, 213);”>secction</section><article style=“background-color: rgb(201, 5, 31);”>article</article><label style=“background-color: rgb(80, 121, 66);”>label</label><span style=“background-color: rgb(18, 69, 230);”>span</span></div></fieldset><fieldset><legend>start</legend><div style=“display: grid; align-content: start; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(155, 68, 233);”>div</div><section style=“background-color: rgb(195, 186, 120);”>secction</section><article style=“background-color: rgb(42, 81, 254);”>article</article><label style=“background-color: rgb(83, 107, 63);”>label</label><span style=“background-color: rgb(145, 183, 232);”>span</span></div></fieldset><fieldset><legend>center</legend><div style=“display: grid; align-content: center; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(193, 108, 158);”>div</div><section style=“background-color: rgb(196, 147, 155);”>secction</section><article style=“background-color: rgb(69, 201, 237);”>article</article><label style=“background-color: rgb(251, 147, 181);”>label</label><span style=“background-color: rgb(242, 28, 56);”>span</span></div></fieldset><fieldset><legend>end</legend><div style=“display: grid; align-content: end; border: 1px solid black; grid-auto-flow: row; height: 200px;”><div style=“background-color: rgb(238, 81, 158);”>div</div><section style=“background-color: rgb(124, 19, 102);”>secction</section><article style=“background-color: rgb(203, 140, 243);”>article</article><label style=“background-color: rgb(252, 98, 239);”>label</label><span style=“background-color: rgb(89, 183, 233);”>span</span></div></fieldset></section>