我使用偽元素 :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: