• Flex

    Je redécouvre un attribut, dont je n'avais pas trouvé l'emploi jusqu'à maintenant mais qui devrait simplifier la vie de certains car le programme fait le calcul pour nous : il s'agit de l'attribut Flex.

    Un cadre ayant cet attribut, et contenant plusieurs éléments (ici, des photos), va calculer, selon ce qu'on lui demande, la place nécessaire pour chacun.

    Ainsi, si vous créez un cadre de 60vw par 69vh et que vous placez 5 images dans ce cadre, il va diviser la largeur totale par 5 et donner à chaque photo nécessaire.

    Si vous voulez qu'une des photos soit plus large que les autres, vous lui donner une valeur particulière et le programme réduira d'autant les autres photos.

    Voyons déjà le résultat: survolez chaque section d'image:

     

     

     

     

     


    <div id="fx1">
    <p id="ca">&nbsp;</p>
    <p id="cb">&nbsp;</p>
    <p id="cc">&nbsp;</p>
    <p id="cd">&nbsp;</p>
    <p id="ce">&nbsp;</p>
    </div>

    <style><!--
    #fx1{display:flex; width:60vw; height:69vh; margin:2vh auto;}
    #ca {height:69vh; background:url('http://ekladata.com/v2q68OSMr4gRLzYwm5oIzMARC1A.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
    #cb {height:69vh; background:url('http://ekladata.com/fUdKqoJihfRs0sOpG6iK17435Sw.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
    #cc {height:69vh; background:url('http://ekladata.com/dzx0Sz7v03I7gQOE-i-bOFCW9EE.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
    #cd {height:69vh; background:url('http://ekladata.com/OJV61VsT-h3idM2hOSX01JQKAlE.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
    #ce {height:69vh; background:url('http://ekladata.com/QHZ1Jt5-V0hUM1YlTiftQSQ6EYc.jpg'); background-size:61vw 69vh; flex:1; transition:all 1s ease-in;}
    #ca:hover,#cb:hover,#cc:hover,#cd:hover,#ce:hover{flex:200;}
    --></style>


    Le cadre du montage est paramétré pour calculer la place de chacun des éléments contenus par display:flex;

    Chacun des éléments est paramétré pour occuper la même largeur: flex:1;

    Il semble qu'il faille préciser la hauteur de chacun (?).

    Au survol, chaque élément occupe 200% de la place et les autres se limitent à l'espace restant.

    Si nous voulions qu'un des éléments occupe plus de place, il suffirait de lui donner une valeur de 2, par exemple.

     

     

     

     

     

    <div id="fx2">
    <p id="ba">&nbsp;</p>
    <p id="bb">&nbsp;</p>
    <p id="bc">&nbsp;</p>
    <p id="bd">&nbsp;</p>
    <p id="be">&nbsp;</p>
    </div>
    <style><!--
    #fx2{display:flex; width:40vw; height:46vh; margin:2vh auto;}
    #ba {background:red; flex:0.5; transition:all 1s ease-in;}
    #bb {background:yellow; flex:1; transition:all 1s ease-in;}
    #bc {background:pink; flex:1.5; transition:all 1s ease-in;}
    #bd {background:lime; flex:2; transition:all 1s ease-in;}
    #be {background:coral; flex:3; transition:all 1s ease-in;}
    #ba:hover,#bb:hover,#bc:hover,#bd:hover,#be:hover{flex:200;}
    --></style>


    Voyons ce que ça donne en vertical. ajoute de: flex-direction: column;