为什么 justify-content: space-between 在这种情况下不起作用？我想将最后一项推到右边缘并将中间一项居中。
div{
background: lightblue;
width: 8rem;
height: 8rem;
}
main{
margin: 2rem auto;
width: 80%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5rem 0rem;
background: yellow;
justify-content: space-between;
}<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>您快到了，但fr您应该使用固定大小8rem（与您的盒子大小对齐），而不是使用小数单位。
frjustify-content一直在拉伸您的网格框，所以这就是为什么没有多余空间您无法申请的原因。
div{
background: lightblue;
width: 8rem;
height: 8rem;
}
main{
margin: 2rem auto;
width: 80%;
display: grid;
grid-template-columns: repeat(3, 8rem); /*Modify 1fr to 8rem*/
gap: 5rem 0rem;
background: yellow;
justify-content: space-between;
}<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句