首頁 > 文章 > web前端 > CSS Flex 版面配置 space-between 最後一行左對齊

CSS Flex 版面配置 space-between 最後一行左對齊

Guanhui原創: 2020-07-21 12:48:295424瀏覽

先看程式碼與效果

<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中文網其他相關文章！

css 伪元素 flex

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS Flex 版面配置實現無縫滾動下一篇：CSS Flex 版面配置實現無縫滾動

看更多