Border d'une flexbox

14 août 2023 à 9:50:39

Bonjour a tous,

Je m'entraîne actuellement à coder en html et css, et je rencontre un problème avec les border d'une flexbox qui n'apparaissent pas comme il le faudrait. En effet, au lieu d'avoir des bordures sur l'ensemble de la flexbox, je n'ai qu'une seule barre qui apparait (cf : capture d'écran).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cours CSS</title>
<!--Relier le fichier style css-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Les bases de CSS</h1>
    </header>

    <main>
<!--Racourci .flexbox pour créer automatiquement la ligne div-->
        <div class="flexbox"></div>
        <h2>Flexbox</h2>
        <ul>
            <li>boite 1</li>
            <li>boite 2</li>
            <li>boite 3</li>
        </ul>
    </main>
</body>
</html>

Et voici juste le code css concernant le style de la flexbox :

.flexbox {
   display: block;
    border: 2px solid darkblue;

}

Et voilà ce que j'ai comme résultat sur mon écran ici. (lien google drive, l'image était trop grande pour l'afficher)

Merci à tous pour votre aide !

-
Edité par GeoffreyMerlet 14 août 2023 à 10:33:21

Lamecarlate

14 août 2023 à 10:23:36

Bonjour,

on ne peut pas voir l'image, il faut une autorisation pour accéder à ton Google Drive. Tu peux héberger l'image un peu partout sur le net, il y a plein de sites pour ça.

Mais ton rendu me semble normal au vu de ton code : ta div en flexbox est vide… Et les éléments prennent la hauteur de leur contenu sauf contre-indication. Ici, la hauteur est nulle.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

GeoffreyMerlet

14 août 2023 à 10:34:48

Merci pour ta réponse Lamecarlate.

J'ai mis à jours le lien pour accéder à la capture d'écran.

Lamecarlate

14 août 2023 à 12:21:34

Maintenant que j'ai pu voir le rendu, je confirme mon second paragraphe.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

GeoffreyMerlet

14 août 2023 à 13:25:32

Un grand merci, Ça marche !

-
Edité par GeoffreyMerlet 14 août 2023 à 13:39:08

Lamecarlate

14 août 2023 à 17:38:40

Pense à marquer ton sujet comme résolu

tu as un bouton pour ça en haut à droite.

Pas d'aide concernant le code par MP, le forum est là pour ça :)