溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何使用CSS Flex 布局 space-between實實現最后一行左對齊？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
首先看代碼和效果
<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 Flex 布局 space-between實實現最后一行左對齊的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
