[Résolu] Flexbox, c'est pas très flex ! par DenebeDenebe - page 1

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.

DenebeDenebe

24 novembre 2021 à 9:53:33

AbcAbc6

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/

24 novembre 2021 à 10:28:06

Merci

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

Flexbox, c'est pas très flex !

Flexbox, c'est pas très flex !

Supprimer

Modérer

Signaler le message aux modérateurs