CSS Flex 布局 space-between 最后一行左对齐
生活随笔
收集整理的這篇文章主要介紹了
CSS Flex 布局 space-between 最后一行左对齐
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
首先看代碼和效果
<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 最后一行左对齐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue截取字符串最后一个.后的字符_vu
- 下一篇： iOS9怎么降级到iOS8.4？教你iO