Cara memasukkan elemen boleh lipat ke dalam susun atur Flexbox

Question

Saya mempunyai susun atur flexbox dengan imej yang dibalut di sekelilingnya dan saya ingin memaparkan beberapa maklumat apabila imej itu diklik. Maklumat harus muncul di antara baris yang mengandungi imej dan baris betul-betul di bawahnya, tanpa mengalihkan "lajur". Ini ialah jenis kesan yang saya inginkan: http://olmenta.altervista.org (apabila anda mengklik pada buku). Inilah yang saya lakukan: https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉739942405 · Answer

Elemen pendedahan perincian sudah mempunyai mekanisme hidup/mati terbina dalam penyemak imbas. Jadi mengapa tidak menggunakannya dan mengubah suai tingkah lakunya untuk memenuhi keperluan kami.

Prinsip asasnya ialah


   some clickable content
   
      Any content you want to disclose when the  gets clicked

Dengan CSS, kami boleh mengawal cara dan tempat kandungan dipaparkan. Sama ada kami menggunakan gaya blok lalai atau susun atur Flexbox/Grid, kandungan diletakkan di luar aliran dokumen biasa. Mereka adalah elemen biasa, jadi pada asasnya apa-apa boleh berlaku.
Secara lalai ia kekal terbuka apabila pengguna mengklik di tempat lain detail/summary, kami memerlukan beberapa Javascript untuk menutup secara automatik kandungan "awam" pada masa ini.
Pengguna cenderung keliru apabila mereka tidak melihat "Butang Tutup", jadi saya meletakkannya di sana. Walau bagaimanapun, klik di mana-mana dalam kotak maklumat untuk menutupnya.

Saya melampaui batas dengan perkara ini dan mencipta demo responsif yang mengabaikan kod anda sepenuhnya (maaf!) sambil cuba mendekati tapak contoh yang mungkin. Saya mengulas di mana-mana yang berkenaan. Jika kurang jelas, sila beritahu saya dalam komen.

Klip

// Contains a reference to the current 'open'  element
var currentDetail;

// Walk the list of all grid cells => 
document.querySelectorAll('.grid .cell').forEach(el => {

    // Walk the list of grid cell children and attach eventlisteners
    for (const child of el.children) {

        // When it's a preview, toggle its information box
        // or open another when the information box is already visible.
        if (child.classList.contains('preview')) {
            // this event triggers before  'toggle' event
            child.addEventListener("click", event => { toggleDetails(event.currentTarget.closest('.cell')) });
            // Finds closest parent .cell
        }

        // When it is an information box, just close it.
        if (child.classList.contains('information')) {
            child.addEventListener("click", event => { closeDetails() });
        }
    };
});

function toggleDetails(el) {
    if (el.open) { /* Browser is about to trigger details 'toggle' */
        currentDetail = null; // all details closed
    }
    else { // not null and different detail
        if ((currentDetail) && (currentDetail != el)) {

            currentDetail.removeAttribute('open'); // close current open detail
        };
        currentDetail = el; // save new opened detail
    };
};

function closeDetails() {
    if (currentDetail) { // Details open?
        currentDetail.removeAttribute('open'); // close current open detail
        currentDetail = null;                  // all details closed
    };
};

/* * { outline: 1px dashed } /* for debugging */

/********************************/
/* some convenient global rules */
/********************************/
*, ::before, ::after { box-sizing: border-box }
/* makes padding and border part of any element total size, margin never */

html, body  { width: 100%; max-width: 100% }
html        { scroll-behavior: smooth }

body {
    margin: unset; /* Kill default margin */

    min-height: 100vh;
    line-height: 1.5;
    padding: 1rem;

    overscroll-behavior: contain; /* Check MDN for this */
}

details, /* Remove CSS defaults */
summary { padding: 0; list-style: none }

img {
    display: block;        /* removes little whitespace below image */
    width: 100%;           /* stretch to full width */
    aspect-ratio: 1 / 1.5; /* or height: auto, your choice */
    object-fit: cover;     /* fill parent, but clip when it doesn't fit */
}

/* Responsive font sizing */
/* Using linear equation y=mx+b => y=0.00625x + 12 (320,14)(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) }
body { font-size: 1rem }

/************************************/
/* DEMO, base layout - mobile first */
/************************************/
.grid {
    display: flex; flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
}

.cell {
    /* fiddle with these properties */
    flex-grow: 1;                /* [OPTIONAL] */
    min-width: min(12rem, 100%); /* set to desired width */

    cursor: pointer;
}

.cell .preview { border: 1px solid Black }

.cell .information {
    overflow: auto; overscroll-behavior: contain;

    position: fixed;    /* within viewport */
    z-index: 99999;     /* over any body content */
    inset: 0%;          /* full screen */

    gap: 1rem;
    padding: 4rem 1rem 1rem;

    background-color: hsl(0,0%,14%); color: hsl(0,0%,90%);

    cursor: default;
}

/****************************/
/* Some responsive behavior */
/****************************/
@media all and (min-width: 361px) {
    .cell .information {
        display: flex; flex-flow: row wrap; justify-content: center;

        inset: 30% 0% 0%;   /* stay % from sides */
        padding: 4rem;
        opacity: 0.985;
    }

    .cell .information img {
        width: auto; max-width: min(360px, 100%);
    }
}
/* Dito */
@media all and (min-width: 721px) {
    .cell {
        flex-grow: 0; /* [OPTIONAL] */
    }
}
/* Allow content to grow, only relevant on +360px devices */
/* as  * { flex: 1 }

/**********************************************/
/* The .information 'x' close button behavior */
/**********************************************/
.cell .information .close {
    position: absolute; top: 0.75rem; right: 1.25rem;
    font-size: 2em; font-style: normal;

    cursor: pointer;
}
.cell .information .close::after       { content: "15" }
.cell .information .close:hover::after { content: "16" }

Nice Description