Container :

10 février 2025
Non classé
0 commentaire
admin

Quand on crée une page web, on utilise des divs pour organiser les éléments (texte, images, boutons…). Mais avant l’invention du Flexbox, c’était compliqué d’aligner proprement ces éléments. Aujourd’hui, Flexbox simplifie la mise en page !

Qu’est-ce qu’un container ?
Un container est une boîte qui contient d’autres éléments. En HTML, une div est souvent utilisée comme container.
Exemple simple :

<div class="container">
    <p>Je suis un élément dans un container</p>
</div>

Par défaut, la div ne fait rien de spécial : c’est juste une boîte invisible.

Comment l’activer ?
Il suffit d’ajouter la propriété

display: flex;

sur le container.

Essayons :

Ce code crée une page « conteneur.html » avec un conteneur flexible contenant trois boites alignées horizontalement. Chaque élément a une couleur de fond, un espacement et un arrondi pour un rendu propre et lisible.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajouter le titre de votre choix ici</title>
  
</head>

<body>
    <div class="container">
        <div class="boite">Élément 1</div>
        <div class="boite">Élément 2</div>
        <div class="boite">Élément 3</div>
    </div>
</body>
</html>

Voici la feuille de style CSS que l’on nommera style-flexible.css pensez à la relier à votre page avec la balise

<link rel="stylesheet" href="....

copier la feuille de style ci-dessous « style-flex-cmopc.css » :


 body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .container {
            display: flex;
            gap: 10px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .boite {
            background: lightblue;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            flex: 1;
        }

A retenir :
• Une div est un container, mais par défaut elle ne fait rien.
• Flexbox est activé avec display: flex; sur le container.
• Avec juste quelques lignes de CSS, on aligne, centre et organise les éléments facilement.

Objectif : Changer l’orientation et tester différents alignements.

Ajoute ces propriétés dans .container :

.container {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

Modifie align-items et observe les différences :

align-items: flex-start; → aligne les boîtes à gauche.
align-items: flex-end; → aligne les boîtes à droite.

Modifie flex-direction et observe :

flex-direction: row; → les boîtes reviennent en ligne.

Ajoute une classe .boite-large dans le HTML à une des boîtes :

.boite-large {
    flex: 2;
}

La boîte avec cette classe prendra deux fois plus d’espace que les autres.

Container :

Articles récents