先看程式碼與效果
<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 最後一行左對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
