Bagaimana untuk Mencipta Item Flex Bertindih dalam Baris Mendatar?

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;

}

• 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!