我現在遇到的問題是，justify-content:center如果專案小于容器的寬度，則不會從左側對齊專案。
以下是我得到并期望的輸出：
Top 是我現在得到的，這里是
uj5u.com熱心網友回復：
grid如果您不希望在不同的視窗大小上有側邊空間，這是另一種使用方法：
.flex-container {
display: grid;
font-size: 30px;
text-align: center;
border: 1px solid black;
grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
}
.flex-item-blue {
background-color: blue;
padding: 10px;
}
.flex-item-grey {
background-color: grey;
padding: 10px;
}<div class="flex-container">
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
<div class="flex-item-blue">1</div>
<div class="flex-item-grey">2</div>
</div>如果你想要側面空間，你可以簡單地將類似的東西應用padding: 0 10px;到主容器上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344703.html
上一篇：如何在發送電子郵件的Google應用腳本的html服務中設定背景影像？
下一篇：打開模型按鈕也隱藏在模型關閉時