简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

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

Guanhui
發布： 2020-07-21 12:48:29
原創
5417 人瀏覽過

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教學》

以上是CSS Flex 版面配置 space-between 最後一行左對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
flex
來源：jb51.net
上一篇：CSS Flex 版面配置實現無縫滾動 下一篇：CSS 中 @ 用法詳解
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
收縮容器以適應包裹的子元素 我試圖弄清楚flexbox如何運作（應該工作？...）對於以下情況：.holder{width:500px;background:lightgray;display:flex;fl...
來自於 2023-10-21 10:33:50
0
2
276
當 Flexbox 項目以列模式換行時，容器不會增加其寬度 我正在開發一個嵌套的Flexbox佈局，其工作原理如下：最外層（ul#main）是一個水平列表，當添加更多項目時必須向右擴展。如果它變得太大，應該有一個水平滾動條。 #main{d...
來自於 2023-10-17 22:05:01
0
2
176
為什麼flex項目不能縮小至內容大小之下？ 我有4個Flexbox列，一切正常，但是當我向列中添加一些文字並將其設置為大字體大小時，由於Flex屬性，它會使列比應有的寬度更寬。我嘗試使用word-break:break-wo...
來自於 2023-10-15 22:06:39
0
2
286
使用指定間隔對行中的flex項目進行對齊 我有兩個包含<div>的行，每行都有display:flex;，每個行中都包含幾個子<div>項目。在下面的範例中，您可以看到在第一行中有2個項目（綠色的盒...
來自於 2023-09-17 19:34:16
0
1
244
移動 safari 是否不可能擁有全頁三行 CSS-Flex 佈局？ 範例程式碼：https://jsfiddle.net/Lsfvotd2/2/似乎沒有解決完全覆蓋我的頁腳的浮動工具列問題。當您開始捲動時，該工具列應該會消失，但是如果您的頁面不捲動...
來自於 2023-09-15 18:24:47
0
1
200
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！