CSS Flex 布局 space-between 最后一行左对齐-tutorial css-php.cn

CSS Flex 布局 space-between 最后一行左对齐

Guanhui

Lepaskan： 2020-07-21 12:48:29

asal

5483 orang telah melayarinya

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>

Salin selepas log masuk

可以看到最后一个p并没有在中间，而是在最后了

因为我们设置了justify-content为space-between，意思就是两边贴边

这时候我们可以给最外层p设置个伪元素，宽度和里面的p宽度一样就好了

只需要两行css就可以

.main:after {
    content: "";
    width: 100px;
}

Salin selepas log masuk

这时候看效果

其实原理就是最后一个伪元素把他挤过来了

就算有9个也没影响，因为他的高度是0，看下图↓

推荐教程：《CSS教程》

Atas ialah kandungan terperinci CSS Flex 布局 space-between 最后一行左对齐. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

CSS Flex 布局 space-between 最后一行左对齐