我使用伪元素: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; }
:after 伪元素占用了 Flex 容器中的空间并干扰了最后一行中项目的对齐,这是您遇到问题的根本原因。在:after 伪元素上使用边距作为 flex auto 的替代方案是解决此问题的一种方法。这是最新版本的 CSS: