Partage
  • Partager sur Facebook
  • Partager sur Twitter

Flexbox, c'est pas très flex !

Sujet résolu
    24 novembre 2021 à 9:53:33

    Bonjour,

    je suis le cours html5/css3…

    Je fais des essais avec Flexbox. Ça fonctionne dans l'ensemble, par contre des fois ce n'est pas très flex.

    1) Je vous présente le résultat de mon code (une capture)

    2) mon code, html et css

    3) J'aimerais bien avoir des avis concernant le décalage obtenu sur la dernière ligne.

    =================================================================

    1) la capture

    2) Le code

    <!DOCTYPE HTML>
    <html>
            <head>
                    <meta charset="utf-8" />
                    <link rel="stylesheet" href="style33-align-content.css" />
                    <title>Chapitre 3.3 - Faites votre mise en page avec Flex</title>
            </head>
    
            <body>
                    <div id="conteneur">
                            <div class="element">Element 1 </div>
                            <div class="element">Element 2</div>
                            <div class="element">Element 3 </div>
                            <div class="element">Element 4 </div>
                            <div class="element">Element 5 </div>
                            <div class="element">Element 6 </div>
                            <div class="element">Element 7</div>
                            <div class="element">Element 8 </div>
                            <div class="element">Element 9</div>
                            <div class="element">Element 10 </div>
                            <div class="element">Element 11</div>
                            <div class="element">Element 12 </div>
                    <div>
            </body>
    </html>
    #conteneur
    {
            display: flex;
    
            justify-content: space-around; /* flex-start (default), flex-end, center, space-between, space-around */
    
                             /* nowrap, wrap, wrap-reverse */
            flex-wrap: wrap; /* wrap: j'autorise à aller à la ligne */
            width: 700px;
            height: 500px;
            border: 2px black solid;
            align-content: center; /* flex-start, flex-end, center, space-between, space-around, stretch */
    }
    
    .element
    {
            width: 150px;
            height: 100px;
    }
    
    .element:nth-child(1)
    {
            background-color: orange;
    }
    
    .element:nth-child(5)
    {
            background-color: orange;
    }
    
    .element:nth-child(7)
    {
            background-color: orange;
    }
    
    .element:nth-child(11)
    {
            background-color: orange;
    }
    
    .element:nth-child(2)
    {
            background-color: blue;
    }
    
    .element:nth-child(4)
    {
            background-color: blue;
    }
    
    .element:nth-child(8)
    {
            background-color: blue;
    }
    
    .element:nth-child(10)
    {
            background-color: blue;
    }
    
    .element:nth-child(3n)
    {
            background-color: green;
    }
    


    3) Observation, question

    À partir de la troisième ligne, les éléments 9, 10, 11 et 12 sont subitement moins larges que les autres éléments (1 à 8). Pourquoi ?

    L'espacement horizontal entre les box 9 à 12 n'est pas régulier, pourquoi ? Alors qu'il l'est pour les éléments précédents

    Merci.

    • Partager sur Facebook
    • Partager sur Twitter
      24 novembre 2021 à 10:17:04

      Bonjour, erreur HTML en L23 c'est une fermeture de balise qu'il faut pas une ouverture, soit </div>.

      Erreur que vous auriez pu trouvez en passant votre code au validateur => https://validator.w3.org/ 

      • Partager sur Facebook
      • Partager sur Twitter
        24 novembre 2021 à 10:28:06

        Merci :)

        et merci pour le lien… Effectivement ça m'aurait donné la solution, je note !

        • Partager sur Facebook
        • Partager sur Twitter

        Flexbox, c'est pas très flex !

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown