我使用偽元素:after將塊列表的最后一行靠左對齊。我使用空間均勻來調整這些區塊。我的問題是最后一行的塊沒有與用戶對齊，因為:在那之后占用了空間。我該如何解決這個問題？

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  &:after {
    content: "";
    flex: auto;
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

.exposegrid {
      width: 500px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px); /* this will create cells that will fill the space , if there is space of five, then each row will have five*/
      gap: 10px /*instedt of margin, use gap to space cells*/
    }
    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

<div class="exposegrid">
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
  </div>

:after偽元素占用了flex容器中的空間，并干擾了最后一行中項目的對齊，這是您所遇到的問題的根本原因。在:after偽元素上使用邊距作為flex auto的替代是解決這個問題的一種方法。這是你的CSS的最新版本:

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: line wrapping;
  justify-content: spatially even;
  &:after {
    content: "";
    flex: none; /* disable flex grow/shrink */
    width: calc((100% - (100px * 4)) / 4); /* calculate border width */
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

/* Add margin to last item in each line */
.exposegrid > *:nth-child(4n+4) {
  right margin: 0;
}