masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Item Flex Bertindih dalam Baris Mendatar?

Bagaimana untuk Mencipta Item Flex Bertindih dalam Baris Mendatar?

Barbara Streisand

Lepaskan： 2024-10-29 09:03:02

asal

766 orang telah melayarinya

How to Create Overlapping Flex Items in a Horizontal Row?

Mencipta Item Fleksibel Bertindih

Apabila mencipta barisan item flex mendatar yang mungkin melebihi lebar yang tersedia, selalunya wajar untuk bertindih. . Secara lalai, flexbox akan mengecilkan item agar sesuai dengan bekas.

Pendekatan Flexbox

Untuk mencapai pertindihan, kita boleh menggunakan pendekatan berikut:

.kad {<br> paparan: flex;<br> align-content: center;<br> max- lebar: 35em;<br>}</p>
<p>.cardWrapper {<br> limpahan: tersembunyi;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: visible;

Salin selepas log masuk

}

.kad {

width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Salin selepas log masuk

}

Balut setiap item fleksibel dalam div .cardWrapper.
Secara lalai, tetapkan .cardWrapper untuk mempunyai limpahan: tersembunyi. Ini akan menyembunyikan sebarang limpahan daripada .card kanak-kanak.
Gunakan :last-child atau :hover untuk membenarkan item terakhir atau item yang dilegar memaparkan limpahannya.
Tetapkan item .card kepada mempunyai lebar tetap dan lebar minimum untuk mengelakkannya daripada mengecut.
Sembunyikan sebarang limpahan daripada item .card menggunakan limpahan: tersembunyi.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Item Flex Bertindih dalam Baris Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Memohon Penapis Skala Kelabu pada Imej dalam Internet Explorer 10? Artikel seterusnya：Mengapa Peralihan CSS Saya Tidak Berfungsi Dengan Tayangan Slaid JavaScript Saya?

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

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2289

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2429

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2041

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...