masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > CSS Flex 布局 space-between 最后一行左对齐

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

Guanhui
Lepaskan： 2020-07-21 12:48:29
asal
5546 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!

Label berkaitan：
flex
sumber：jb51.net
Artikel sebelumnya：CSS Flex 布局实现无缝滚动 Artikel seterusnya：CSS 中 @ 用法详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Bagaimanakah cara saya mengubah suai kad ini supaya responsif dengan Boostrap 4? Bagaimanakah saya boleh mempunyai 4 kad dipaparkan setiap baris dan sudah tentu menjadikan...
daripada 2024-04-05 10:48:45
0
1
4072
Jajarkan DIV ke tengah dengan kandungan di kedua-dua belah Jadi saya mempunyai 5 item (dalam DIV yang mengandungi). Barisan item adalah seperti berik...
daripada 2024-04-04 23:19:14
0
1
3438
Kaedah CSS dan HTML untuk mengalihkan perenggan ke kiri pada skrin bersaiz mudah alih Ia kelihatan sempurna pada skrin komputer biasa 16:9, dengan teks di sebelah kiri dan imej...
daripada 2024-04-04 20:25:22
0
1
330
Tukar kelegapan imej apabila memilih pilihan daripada borang Bagaimanakah saya boleh menukar kelegapan imej idMaster kepada 1 apabila saya memilih pili...
daripada 2024-04-03 23:00:48
0
2
304
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan