Site web style carré

mariama
Les bases HTML/CSS

Salut ! j'ai un petit problème avec mes deux carrés qui n'arrive pas à s'agrandir jusqu'au milieu . J'ai fait le display-flex, j'ai fait aussi le calcul du width pour les 2 parties. Mais par contre, je n'arrive pas à agrandir les 2 parties jusqu'au milieu. Et je me demandais si quelqu'un pourrait m'aider à trouver une solution à sa svp ?

Mon code html

<section class="section-friperie red-b">
        <div class="parent-flex-friperie red-b">

            <div class="cote-gauche-friperie cyan-b">
                <div class="cote-gauche-image yellow-b"><img src=""></div>
                <div class="cote-gauche-text yellow-b"><h3>robes</h3></div>
                <div class="cote-gauche-image yellow-b"><img src=""></div>
                <div class="cote-gauche-image yellow-b"><img src=""></div>
                <div class="cote-gauche-text yellow-b"><h3>robes</h3></div>
                <div class="cote-gauche-image yellow-b"><img src=""></div>
                <div class="cote-gauche-image yellow-b"><img src=""></div>
                <div class="cote-gauche-text yellow-b"><h3>robes</h3></div>
                <div class="cote-gauche-image yellow-b"><img src=""></div>
            </div>

            <div class="cote-droite-friperie blue-b">
                <h1><span>Fri</span>perie</h1>
            </div>

        </div>
    </section>

Mon code css

.section-friperie{

}

.parent-flex-friperie{
    display: flex;
    justify-content: space-between;
}

.cote-gauche-friperie {
    max-width: calc((100px - 50%) / 2);
}

.cote-gauche-text{

}

.cote-gauche-image{

}

.cote-gauche-image img{

}

cote-droite-friperie{
    max-width: calc((100px - 50%) / 2);
}

.cote-droite-friperie h1{
    color: orangered;
}

.cote-droite-friperie span{

}

Ce que je veux

Je veux 2 gros carré un à côté de l'autre qui prend toute l'éspace de l'écran

Ce que j'obtiens
2 gros carré qui n'arrive pas à s'agrandir

3 réponses

Mickael Christine
Réponse acceptée

Yo, donne leur un taille fix pas besoin de calc ni de justify-content

        .parent-flex-friperie{
            display: flex;
            width: 100%;
        }
        .cote-gauche-friperie {
           width: 50%;
        }
        cote-droite-friperie{
           width: 50%;
        }
        ou
        .cote-gauche-friperie {
           flex: 0.5;
        }
        cote-droite-friperie{
           flex: 0.5;
        }

la hauteur se fera avec le contenu dans tes elements.

mariama
Auteur

Finalement j'ai reussi à trouver une solution !
Mais merci cas même pour ton truc. C'est une bonne option.
Je n'avais pas imaginer sa !

johnshelbyy

thanks for the solution i too was facing the same issue.