如何使用'justify-content: space- Between”确保 Flexbox 网格最后一行的间距均匀？

Flex-box：对齐网格的最后一行

在具有 flex-flow 的 Flex-box 容器中：行换行；和 justify-content: space- Between; ，最后一行项目可能无法正确对齐。本文探讨了一种简单的解决方案，将最后一行与其他行对齐，保持所需的间距。

该解决方案利用 ::after 伪元素自动填充容器中的剩余空间。通过分配 flex: auto; to ::after，它会填充 HTML 中的空白空间，没有任何额外内容。

.grid {<br> display: flex;<br> flex-flow: rowwrapper;<br> justify-content: space- Between;<br>}<p>.grid::after {<br> 内容： "";<br> flex: auto;<br>}<br>

这种方法提供了一个干净、简单的解决方案，避免了向 HTML 代码添加不必要的元素。请查看 http://codepen.io/DanAndreasson/pen/ZQXLXj 的现场演示，见证其有效性。

以上是如何使用'justify-content: space- Between”确保 Flexbox 网格最后一行的间距均匀？的详细内容。更多信息请关注PHP中文网其他相关文章！