CSS Flex 布局 space-between 最后一行左对齐

互联网 20-7-21

首先看代码和效果

<style>         .main {             outline: 1px solid;             display: flex;             justify-content: space-between;             flex-wrap: wrap;         }         .main>p {             width: 100px;             height: 100px;             margin-bottom: 10px;             background-color: lightgreen;         }              </style>     <body>         <p class="main">             <p>1</p>             <p>2</p>             <p>3</p>             <p>4</p>             <p>5</p>             <p>6</p>             <p>7</p>             <p>8</p>         </p>     </body>

可以看到最后一个p并没有在中间，而是在最后了

因为我们设置了justify-content为space-between，意思就是两边贴边

这时候我们可以给最外层p设置个伪元素，宽度和里面的p宽度一样就好了

只需要两行css就可以

.main:after {     content: "";     width: 100px; }

这时候看效果

其实原理就是最后一个伪元素把他挤过来了

就算有9个也没影响，因为他的高度是0，看下图↓

推荐教程：《CSS教程》

以上就是CSS Flex 布局 space-between 最后一行左对齐的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：左对齐

CSS Flex 布局 space-between 最后一行左对齐

相关资讯

标签推荐