Apprendre la programmation HTML et CSS #9 Mise en page FlexBox (2/2)
Informerick
mars 19, 2022
97
Aucun commentaire
Tu veux apprendre a faire la mise en page flexbox ? Je montre les propriétés de base css et comment utiliser flexbox.
Bienvenue dans cette 9e partie des tutoriels sur apprendre le HTML et CSS pour les débutants. Aujourd’hui nous allons voir comment ajouter et faire la mise en page de notre site web de la nouvelle manière, c’est-à-dire avec Flexbox.
La mise en page avec Flexbox nous permet plusieurs choses, c’est une façon plus conviviale de faire une mise en page et qui est beaucoup plus simple. Avec Flexbox, nous pouvons faire ce qui était possible de faire avant mais en beaucoup moins de ligne et beaucoup plus adaptatif à plusieurs de l’écran.
Pour mieux comprendre, dites-vous que le modèle Flexbox c’est un modèle de boîtes qui nous permet de modifier tous les éléments sur de la boîte.
La mise en page Flexbox se base sur des boîtes comme je l’ai dit plus haut. Ces boîtes se basent sur deux axes, l’axe principal et axe secondaire. Sur ce principe, l’axe principal est l’horizontal et l’axe secondaire est l’axe vertical. Nous avons plusieurs éléments qui se basent là-dessus. Comme des éléments qui vont définir son espace basé sur l’axe vertical.
Alors tu vas toutes les espacer de manière égale celle qui m’a donné un rendu très propre. En bref, cela fonctionne pour tous les éléments, il faut simplement les apprendre!
Propriétés d’alignement Flexbox
Nous allons tout d’abord voir les propriétés de l’alignement de Flexbox. Les propriétés d’alignement de Flexbox nous permettent de modifier l’alignement du contenu parents et des contenus enfants. Nous avons tout de même encore besoin d’utiliser les div et les span lorsque nous utilisons le Flexbox.
Pour définir un événement en Flexbox, nous avons besoin de la propriété CSS:
Display: flex; /* Définir sur le conteneur parent */
Cela rendra l’élément parent avec les propriétés de Flexbox qui se repartira à ses enfants.
Flex-direction
Le flex-direction permet de définir si les éléments enfant dans le parent sont soit dans une ligne , soit en colonne.
COLUMNCOLUMN-REVERSEROWROW-REVERSE
Voici ce que vous pouvez faire avec flex-direction:
Flex-direction: row; /*Éléments enfant alignés sur une ligne */
Flex-direction: column; /* Éléments enfant alignés sur une colonne */
Flex-direction: row-reverse; /* Aligné sur une ligne mais inversé */
Flex-direction: column-reverse; /* Aligné sur une colonne mais inversé */
Justify-content
Le justify-content tant qu’à lui permet de modifier comment nous allons espacer les éléments et l’alignement de manière horizontale.
Centerflex-endflex-startspace-aroundspace-between
Voici ce que vous êtes capable de faire avec justify-content:
Justify-content: flex-start; /* Tous les éléments au début */
Justify-content: flex-end; /* Tous les éléments à la fin */
Justify-content: center; /* Tous les éléments au centre */
Justify-content: space-between; /* Tous les éléments réparti entre eux */
Justify-content: space-arround; /* Pareil que space-between mais aussi envers les rebords */
Justify-content: space-evenly; /* Séparer tous les éléments de manière égale */
Align-items
Tant qu’à continuer dans ce qui est dans l’alignement du texte, nous avons le align-items. Cette propriété CSS permet de modifier la hauteur des éléments enfant comparer à l’élément parent.
Grâce à ceci, nous allons pouvoir aligner du contenu sur toute la hauteur ou sur toute la fin le Centre et ou l’étirer.
flex-startcenterflex-endbaselinestretch
Voici ce que vous êtes capable de faire avec align-items:
Align-items: stretch; /*Étire le conteneur enfant sur tout la hauteur du parent */
Align-items: flex-start; / start / self-start /*Apporte le ou les conteneurs enfant sur le haut du parent */
Align-items: flex-end; / end / self-end /*Apporte les ou les conteneurs enfant sur la bas du parent */
Align-items: center; /* Aligne les elements enfant sur le milieu vertical du conteneur parent
Align-items: baseline; /*Met tout le contenu enfant sur un pied d’estale */
Align-content
Et la dernière propriété pour ce qui est de l’alignement du contenu est le align-content. Ceci vous permet de modifier l’alignement vertical de votre contenu. Cela ressemble au justify-content, mais sur la verticale. Ceci est utile lorsque vous avez plusieurs contenu qui est sur plusieurs lignes.
Voici ce que vous êtes capable de faire avec Align-content:
Align-content: flex-start; /*Apporte tout le contenu au haut du conteneur */
Align-content: flex-end; /* Apporte tout le contenu a la fin du conteneur */
Align-content: center; /* Centre tout le contenu au centre */
Align-content: stretch; /*Élargi au maximum et réparti la hauteur des enfants pour faire correspondre avec lui du parent */
Align-content: space-between; /* Espacement entre les enfants égale */
Align-content: space-arround; /* Espacement entre les enfants égale + envers les rebords */
Propriétés de contenu flexbox
Jusqu’à présent, les propriétés que nous utilisions étaient simplement pour aligner le contenu des enfant à partir de notre conteneur parent. Maintenant nous allons voir comment modifier le ce que fait le contenu entre les contenus etc
Flex-wrap
En 1er lieu, nous avons le Flex-wrap. Avec ceci, lorsque nous avons rempli notre écran et que le conteneur n’aura plus assez de place, les enfants vont faire un retour à la ligne.
Voici comment utiliser le flex-wrap:
Flex-wrap: wrap; /* Retour a la ligne lorsque plus d’espace */
Flex-wrap: nowrap; /*Pas de retour a la ligne lorsque plus d’espace */
Flex-wrap: wrap-reverse; /*Retour a la ligne inversé au rétréssisement */
Gap, row-gap & column-gap
Ensuite nous avons le GAP. Lui permet d’espacer le contenu entre eux. Nous pouvons l’ajouter soit pour entre les lignes, soit entre les colonnes ou bien même partout autour du contenu.
column-gapgaprow-gap
Donc nous avons 3 types de séparation GAP.
Le GAP:
Gap: 22px; /* Ajoute un espacement de 22 pixels partout autour du contenu. */
Le column-gap :
Column-gap: 35px; /*Ajoute un espacement de 35 pixels entre les colonnes */
Le row-gap:
Row-gap: 13px; /* Ajoute un espacement de 13 pixels entre les lignes */
Propriétés d’ordre avec Flexbox
Finalement, en Flexbox nous avons des propriétés d’ordre. Chacun de ces éléments sont ajouté au éléments enfant et permettent de modifier l’ordre ou modifier son contenu selon l’ordre défini.
Order
La propriété order nous permet de modifier l’ordre des éléments enfants dans le parent. Le chiffre le plus bas sera en premier jusqu’au chiffre le plus haut.
Comment mettre la propriété order:
Order: 1; /* Premier element */
Order: 25; /* Deuxième élément */
Order: 99; /* Dernier Element */
Flex-grow
Pour ce qui est de la suite, nous avons la propriété Flex-grow. Comme son nom l’indique, cela nous permet de choisir l’agrandissement des éléments. En plus bref, les éléments enfant en flexbox s’agrandissent et selon une taille défini pour que chacun ait un certain pourcentage de l’espace disponible.
Pour utiliser flex-grow, il faut utiliser:
/* Par exemple que je veux qu’un élément enfant soit 2 fois plus gros que l’autre enfant */
Flex-grow: 2; /*Je défini ceci sur l’élément que je souhaite qu’il soit 2x plus gros */
flex-shrink
Le flex-shrink tant qu’à lui est le contraire de flex-grow. Son but est de définir jusqu’à combien de fois mon élément enfant peut se rétrécir.
/* Si je veux que mon élément enfant puisse devenir 3x plus petit selon la grosseur de l’écran */
Flex-shrink: 3; /*Je défni ceci sur l’élément enfant que je souhaite qu’il puisse devenir 3x plus petit *
Flex-basis
Le flex-basis lui pêrmet de définir une taille par défaut d’un élément avant que l’espace des autres soit attribué. Donc si nous voulons lui donner une taille minimale, ce sera avec cette propriété.
/* Par exemple je veux que mon élément ne soit pas en dessous de 30em */
Flex-basis: 30em; /*Sur l’élément enfant que je veux pas qu’il dépasse 30 em */
Align-self
Et finalement, la dernière propriété de notre mise en page flexbox: l’align-self. Lui, il permet de définir son alignement vertical, mais seulement à lui. De ce fait cela se défini simplement sur l’élément enfant.
Voici comment utiliser align-self:
Align-self: auto / flex-start / center / baseline / stretch; /* Définir un alignement vertical seulement à un élément. */
FAQ
Quand utiliser flexbox?
Dès que vous le pouvez! Flexbox doit être priorisé pour votre mise en page de votre site web. Il a de grands avantages et a été conçu pour pallier les plus gros problèmes qui étaient en place avant pour la mise en page.
Que veux dire FlexBox
Flexbox est le diminutif de flexible box (boites flexibles) donc ce modèle ce base sur des comportements de boîte flexible.
Ce tutoriel se trouve dans la catégorie: Programmation
Profitez pleinement de l'informatique
L’informatique est un domaine qui est en constante évolution. Faites partie des premiers à recevoir les dernières nouveautés
Apprendre la programmation HTML et CSS #9 Mise en page FlexBox (2/2)
Bienvenue dans cette 9e partie des tutoriels sur apprendre le HTML et CSS pour les débutants. Aujourd’hui nous allons voir comment ajouter et faire la mise en page de notre site web de la nouvelle manière, c’est-à-dire avec Flexbox.
La mise en page avec Flexbox nous permet plusieurs choses, c’est une façon plus conviviale de faire une mise en page et qui est beaucoup plus simple. Avec Flexbox, nous pouvons faire ce qui était possible de faire avant mais en beaucoup moins de ligne et beaucoup plus adaptatif à plusieurs de l’écran.
Pour mieux comprendre, dites-vous que le modèle Flexbox c’est un modèle de boîtes qui nous permet de modifier tous les éléments sur de la boîte.
Version vidéo
Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Présentation de la mise en page avec Flexbox
La mise en page Flexbox se base sur des boîtes comme je l’ai dit plus haut. Ces boîtes se basent sur deux axes, l’axe principal et axe secondaire. Sur ce principe, l’axe principal est l’horizontal et l’axe secondaire est l’axe vertical. Nous avons plusieurs éléments qui se basent là-dessus. Comme des éléments qui vont définir son espace basé sur l’axe vertical.
Alors tu vas toutes les espacer de manière égale celle qui m’a donné un rendu très propre. En bref, cela fonctionne pour tous les éléments, il faut simplement les apprendre!
Propriétés d’alignement Flexbox
Nous allons tout d’abord voir les propriétés de l’alignement de Flexbox. Les propriétés d’alignement de Flexbox nous permettent de modifier l’alignement du contenu parents et des contenus enfants. Nous avons tout de même encore besoin d’utiliser les div et les span lorsque nous utilisons le Flexbox.
Pour définir un événement en Flexbox, nous avons besoin de la propriété CSS:
Cela rendra l’élément parent avec les propriétés de Flexbox qui se repartira à ses enfants.
Flex-direction
Le flex-direction permet de définir si les éléments enfant dans le parent sont soit dans une ligne , soit en colonne.
Voici ce que vous pouvez faire avec flex-direction:
Justify-content
Le justify-content tant qu’à lui permet de modifier comment nous allons espacer les éléments et l’alignement de manière horizontale.
Voici ce que vous êtes capable de faire avec justify-content:
Align-items
Tant qu’à continuer dans ce qui est dans l’alignement du texte, nous avons le align-items. Cette propriété CSS permet de modifier la hauteur des éléments enfant comparer à l’élément parent.
Grâce à ceci, nous allons pouvoir aligner du contenu sur toute la hauteur ou sur toute la fin le Centre et ou l’étirer.
Voici ce que vous êtes capable de faire avec align-items:
Align-content
Et la dernière propriété pour ce qui est de l’alignement du contenu est le align-content. Ceci vous permet de modifier l’alignement vertical de votre contenu. Cela ressemble au justify-content, mais sur la verticale. Ceci est utile lorsque vous avez plusieurs contenu qui est sur plusieurs lignes.
Voici ce que vous êtes capable de faire avec Align-content:
Propriétés de contenu flexbox
Jusqu’à présent, les propriétés que nous utilisions étaient simplement pour aligner le contenu des enfant à partir de notre conteneur parent. Maintenant nous allons voir comment modifier le ce que fait le contenu entre les contenus etc
Flex-wrap
En 1er lieu, nous avons le Flex-wrap. Avec ceci, lorsque nous avons rempli notre écran et que le conteneur n’aura plus assez de place, les enfants vont faire un retour à la ligne.
Voici comment utiliser le flex-wrap:
Gap, row-gap & column-gap
Ensuite nous avons le GAP. Lui permet d’espacer le contenu entre eux. Nous pouvons l’ajouter soit pour entre les lignes, soit entre les colonnes ou bien même partout autour du contenu.
Donc nous avons 3 types de séparation GAP.
Le GAP:
Le column-gap :
Le row-gap:
Propriétés d’ordre avec Flexbox
Finalement, en Flexbox nous avons des propriétés d’ordre. Chacun de ces éléments sont ajouté au éléments enfant et permettent de modifier l’ordre ou modifier son contenu selon l’ordre défini.
Order
La propriété order nous permet de modifier l’ordre des éléments enfants dans le parent. Le chiffre le plus bas sera en premier jusqu’au chiffre le plus haut.
Comment mettre la propriété order:
Flex-grow
Pour ce qui est de la suite, nous avons la propriété Flex-grow. Comme son nom l’indique, cela nous permet de choisir l’agrandissement des éléments. En plus bref, les éléments enfant en flexbox s’agrandissent et selon une taille défini pour que chacun ait un certain pourcentage de l’espace disponible.
Pour utiliser flex-grow, il faut utiliser:
flex-shrink
Le flex-shrink tant qu’à lui est le contraire de flex-grow. Son but est de définir jusqu’à combien de fois mon élément enfant peut se rétrécir.
Flex-basis
Le flex-basis lui pêrmet de définir une taille par défaut d’un élément avant que l’espace des autres soit attribué. Donc si nous voulons lui donner une taille minimale, ce sera avec cette propriété.
Align-self
Et finalement, la dernière propriété de notre mise en page flexbox: l’align-self. Lui, il permet de définir son alignement vertical, mais seulement à lui. De ce fait cela se défini simplement sur l’élément enfant.
Voici comment utiliser align-self:
FAQ
Quand utiliser flexbox?
Dès que vous le pouvez! Flexbox doit être priorisé pour votre mise en page de votre site web. Il a de grands avantages et a été conçu pour pallier les plus gros problèmes qui étaient en place avant pour la mise en page.
Que veux dire FlexBox
Flexbox est le diminutif de flexible box (boites flexibles) donc ce modèle ce base sur des comportements de boîte flexible.
Ce tutoriel se trouve dans la catégorie: Programmation
Profitez pleinement de l'informatique
L’informatique est un domaine qui est en constante évolution. Faites partie des premiers à recevoir les dernières nouveautés
Partager ceci
À voir également