Skip to main content

Flex-box

Choisissez votre classe

Les <div> et Flexbox : Organiser et Structurer Tes Pages Web​

Les Balises <div> : Le Conteneur Polyvalent​

La balise <div> (pour “division”) est l’un des éléments les plus fondamentaux en HTML. C’est un conteneur générique que tu peux utiliser pour regrouper d’autres éléments HTML. En gros, si tu veux diviser ta page en différentes sections ou regrouper des éléments pour les styliser ensemble, <div> est ton meilleur ami.

Pourquoi utiliser <div> ?​

  • Organisation : Utiliser des <div> te permet de structurer ta page en sections logiques. Par exemple, tu peux avoir une <div> pour l’en-tête, une autre pour le contenu principal, et une autre pour le pied de page.
  • Styling : Les <div> sont extrêmement pratiques pour appliquer des styles CSS à un groupe d’éléments. Plutôt que de styliser chaque élément individuellement, tu peux appliquer un style à toute une section en une seule fois.
  • Interactivité : En combinant les <div> avec JavaScript, tu peux créer des sections interactives qui réagissent aux actions de l’utilisateur, comme des zones cliquables ou des animations.

Exemple d’utilisation de <div> :

    <div class="container" >
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>

Dans cet exemple :

  • La <div class="container"> regroupe l'ensemble des éléments, c'est la div parent
  • La <div class="items"> représente les éléments à l'intérieur de la div parent qui sont les enfants
Remarque :

Une <div> n’a aucun style ou signification particulière par défaut. Elle est là pour structurer et organiser le contenu. C’est avec le CSS que tu vas donner du style et de la forme à ce conteneur.

Flexbox : Le Maître de la Mise en Page​

Flexbox, ou Flexible Box Layout, est une méthode moderne de mise en page en CSS. Elle est particulièrement utile pour créer des mises en page complexes qui s’adaptent bien à différentes tailles d’écran. Avec Flexbox, tu peux aligner, centrer, et espacer les éléments facilement, sans avoir à jongler avec des marges ou des flottants (float).

Les Concepts de Base de Flexbox

Conteneur flex (display: flex;) :​

Pour utiliser Flexbox, commence par appliquer display: flex; à une <div> ou tout autre conteneur. Cela transforme ce conteneur en un “flex container”, et tous les éléments à l’intérieur deviennent des “flex items”. Nous ajouteront également de la hauteur, histoire qua la div apparaisse ainsi qu'une couleur de fond.

.container {
    display: flex;
    height: 800px;
    background-color: purple;
}

Afin que l'on puisse voir les effets, ajoutons un peu de style aux enfants également :

.items {
    height: 300px;
    background-color: orange;
    width: 150px;
}

Direction de la flexbox (flex-direction) :​

Par défaut, les éléments flex sont alignés en ligne (de gauche à droite).
Tu peux changer cette direction en utilisant flex-direction.
Si tu souhaites les afficher verticalement c'est flex-direction: column qu'il faudra utiliser, sinon, par défaut, c'est flex-direction: row; mais que tu n'auras pas besoin de préciser puisqu'il est par défaut.

.container {
    display: flex;
    height: 800px;
    background-color: purple;
    flex-direction: column; /* Aligne les éléments verticalement */
}

Justification (justify-content) :​

justify-content te permet de contrôler l’espacement des éléments le long de l’axe principal (horizontal ou vertical, selon flex-direction).

Pour aligner les éléments au début : justify-content: flex-start;
Pour aligner les éléments au centre : justify-content: center;
Pour espacer entre les éléments avec un espace égal : justify-content: space-between;
Pour espacer autour des éléments avec un espace égal : justify-content: space-around;\

.container {
    display: flex;
    height: 800px;
    background-color: purple;
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: space-around;
}

Alignement (align-items) :​

align-items contrôle l’alignement des éléments le long de l’axe secondaire (perpendiculaire à l’axe principal).

Pour aligner les éléments en haut : align-items: flex-start;
Pour aligner les éléments verticalement : align-items: center;
Pour espacer entre les éléments en bas : align-items: flex-end;\

Exemple de Mise en Page avec Flexbox :​

Imaginons que tu veux créer un container avec trois boîtes à l'intérieurs bien réparties :

Html :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="box.css">
</head>
<body>
    <div class="container" >
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</body>
</html>

Css :

.container {
                height: 800px;
                background-color: purple;
                display: flex;
                gap: 25px;
                justify-content: center;
                align-items: center;
}

.items {
                height: 300px;
                background-color: orange;
                width: 150px;
}

Résultat :​

Conclusion :​

Les balises <div> et Flexbox sont des outils puissants pour structurer et mettre en page ton site web de manière efficace et flexible. Avec <div>, tu peux organiser ton contenu en sections logiques, tandis que Flexbox te permet de gérer facilement l’alignement et l’espacement des éléments pour des mises en page modernes et réactives. Que tu construises un simple site vitrine ou une application complexe, maîtriser ces concepts est essentiel pour tout développeur web.