• Flex box

    Une écriture que je n'utilise pas car j'ai pris l'habitude de placer chaque élément en indépendant et de déterminer sa position; c'est pourtant l'écriture de la structure de nos blogs.

    On peut obtenir le même résultat avec d'autres écritures mais il semble qu'ainsi, le programme calcule beaucoup de choses pour vous !

    Dans un cadre, dont vous déterminez la dimension en adaptatif, selon l'ordre de placement des éléments (rangées ou colonnes), et selon les dimensions de chaque  élément, le programme va calculer pour vous les positions et espaces.

    Si vous laissez le tout sur une seule ligne, il va modifier la largeur de chaque élément pour tout faire entrer en largeur.

    La cadre du montage est paramétré pour centrer les éléments et changer de ligne au dépassement.
    Les espaces sont calculés en fonction des largeurs des éléments.
    Site explicatif: ICI

    Première ligne (row) avec 3 éléments de différentes largeurs et hauteurs.

    Le changement de largeur sur un élément réorganise l'ensemble.

    Sur cette ligne, 2 éléments centrés automatiquement dans le montage.

    Selon la hauteur du plus haut élément, l'espace dessous varie.

    1 seul élément, centré dans le montage.
    Les unités de dimensions sont adaptatives.

    <div id="fl0">
    <p id="fl1" class="fx">La cadre du montage est param&eacute;tr&eacute; pour centrer les &eacute;l&eacute;ments et changer de ligne au d&eacute;passement.<br />Les espaces sont calcul&eacute;s en fonction des largeurs des &eacute;l&eacute;ments.<br />Site explicatif: <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank&quot;">ICI</a></p>
    <p id="fl2" class="fx">Premi&egrave;re ligne (row) avec 3 &eacute;l&eacute;ments de diff&eacute;rentes largeurs et hauteurs.</p>
    <p id="fl3" class="fx">Le changement de largeur sur un &eacute;l&eacute;ment r&eacute;organise l'ensemble.</p>
    <p id="fl4" class="fx">Sur cette ligne, 2 &eacute;l&eacute;ments centr&eacute;s automatiquement dans le montage.</p>
    <p id="fl5" class="fx">Selon la hauteur du plus haut &eacute;l&eacute;ment, l'espace dessous varie.</p>
    <p id="fl6" class="fx">1 seul &eacute;l&eacute;ment, centr&eacute; dans le montage.<br />Les unit&eacute;s de dimensions sont adaptatives.</p>
    </div>
    <style><!--
    #fl0{width:60vw; height:auto; margin:2vh auto; border:0.2vh solid black; display:flex; flex-flow: row wrap; justify-content: space-around; }
    .fx{box-sizing:border:box; border:0.5vh double black; font-size:1vw; text-align:center; line-height:1.5vw;}
    #fl1{width:20vw; height:20vw; background:red;}
    #fl2{width:10vw; height:10vw; background:yellow;}
    #fl3{width:15vw; height:15vw; background:green;}
    #fl4{width:18vw; height:10vw; background:pink;}
    #fl5{width:18vw; height:7vw; background:grey;}
    #fl6{width:30vw; height:5vw; background:lime;}
    --></style>

    display:flex; le cadre va adapter la disposition de chaque élément automatiquement.

    flex-flow: row wrap; changement de ligne dès le dépassement en largeur.

    justify-content: space-around; centrage en largeur des éléments avec calcul de l'espace inter-élément.

    Je vous laisse consulter le site que j'indique en lien ... ce que je vais continuer à faire moi-même !