我正在使用CSS网格来布局这样的某些项目...
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
如何使最后一行居中而不是左对齐?我不能保证项目的数量,因此想使布局适合任何数量的项目。
这是我应该使用flexbox代替的东西吗?还是CSS网格适合使用?
CSS Grid不适合在整行中对齐,因为纵横交错的轨道阻碍了这种方式。以下是详细说明:
或者,将flexbox与一起使用justify-content: center
。
这会将所有项目打包在该行的水平中心。然后,您的利润将它们推开。
在完全填充的行上,justify-content
将没有任何作用,因为没有可用空间来工作。
在具有可用空间的行(在您的情况下,仅最后一行)中,项目居中。
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
flex: 0 0 calc(16.66% - 20px);
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
* {
box-sizing: border-box;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句