我使用偽元素 :after 在左側對齊區塊清單的最後一行。我使用space-evenly來證明這些區塊的合理性。我的問題是最後一行的區塊與使用者不對齊，因為 :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>
: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; }.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); }