我想有一個左對齊的方塊列表，但它們應該在父div整體居中。

所以代替這個的是:

我想要這個:

我不想這樣:

我想有一個應該由容器包裝的元素列表，項目之間的空間應該是固定的(沒有調整之間)，所有的項目應該對父div居中。

flex有這種可能嗎？

這是我的代碼:

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: start; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}

<div class="container">
  <div class="container-squares">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

使用flex:你可以在容器方塊中從開始到中心改變對齊內容

ie:。容器正方形{ justify-content:center；}

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}

<div class="container">
  <div class="container-squares">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

我覺得你不能。

如果使用display:flex；justify-content:在父容器上居中最后一項跳轉到中心

檢查此代碼:

.container {
    padding: 1rem;
    width: 80%;
    border: 1px solid;
    overflow: hidden;
    resize: horizontal;
 }
 .container-squares {
    display: grid;
    grid-template-columns: repeat(auto-fit, 10rem);
    grid-gap: 1rem;
    justify-content: center;
}
.item {
    aspect-ratio: 1;
    background-color: #f4cbcc;
    border: 1px solid black;
}

<div class="container">
    <div class="container-squares">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
    </div>
</div>