3-3 : Faites votre mise en page avec Flexbox ici
Flexbox :
C'est comme une bibliothèque. La bibliothèque est comme le conteneur et les étagères des éléments avec du contenu. Toutes les balises en paires de type block sont potencielement une bibliothèque, des conteneurs et du contenu.
Un conteneur (container en anglais) est une balise qui peut renfermer d'autres balises, comme du texte ou encore des images. Les conteneurs les plus célèbres sont les balises ‹div› et ‹span›.
Par défaut, les éléments ou blocks se mettent les uns en dessous des autres.
Il faut prendre en compte deux axes : l'axe principal et l'axe secondaire :
Si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical.
Si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.
margin-auto :
Le centrage vertical et horizontal peut d'ailleurs être obtenu encore plus facilement. Le conteneur est une Flexbox, et établit des marges automatiques sur les éléments à l'intérieur.
Pour tout ces exercices les pages sont avec un "flex-wrap: warp;" se qui donne un autre résultat en son absence à partir de "aligne-content".
Propriétés du conteneur :
Dispaly: flex : Rendre flexible le conteneur.
Par défaut, avec "display: flex", les blocks dans le conteneur se mettent horizontalement, c'est l'axe principal (justify-content). Quand les blocks dans le conteneur sont mis verticalement, c'est l'axe secondaire (align-items).
La première chose à faire est de rendre l'intégralité du conteneur fléxible pour être agencé comme on le veut.
CSS : section{display:flex;}.
HTML: C'est automatique sur les balises ‹section›, cela correspond à la zone verte.
Resultat : ici
flex-direction: donner une direction
Donner une direction aux éléments. Exemple avec row (une rangée) et column (une colonne).
row : . flex-direction: row : direction horizontale, une rangée à gauche :
CSS : flex-direction: row; dans section.
HTML : c'est automatique avec le selecteur "section". Il n'y a qu'une ligne.
Resultat : ici
row-reverse : . flex-direction: row-reverse : direction horizontale, une rangée à droite ordre inversé :
CSS : flex-direction: row-reverse; dans section.
HTML: c'est automatique avec le selecteur "section". Il y a qu'une ligne, mais dans l'ordre inverse et à droite.
Resultat : ici
column : flex-direction: column : direction vertical, une colone à gauche :
CSS : flex-direction: column; dans section.
HTML : c'est automatique avec le selecteur "section". Il n'y a qu'une colonne.
Resultat : ici
column-reverse : flex-direction: column-reverse : direction vertical, une colone à gauche ordre inversé :
CSS : flex-direction: column-reverse; dans section.
HTML : c'est automatique avec le selecteur "section".Il n'y a qu'une colonne, ranger à l'envers et en bas.
Resultat : ici
justify-content : Alignement de l'axe principal.
Sert à indiquer l'alignement sur l'axe principal. Il y en a plusieurs comme les différents exemples suivant:
Ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont dans une direction verticale. Dans ce cas, l'axe vertical devient l'axe principal, et justify-content s'applique aussi.
Quand l'axe principal est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.
space-around : justify-content: space-around sert à répartir les éléments de façon homogène sur la rangée.
Exemple avec une rangée (flex-direction: row) :
CSS : justify-content: space-around; dans section.
HTML : c'est automatique avec le selecteur "section". Il un a une rangée et les blocs sont rapartie de façon homogène avec un espace sur les côtés.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : justify-content: space-around; dans section.
HTML : c'est automatique avec le selecteur "section". Il y a qu'une colonne et ils sont réparties de façon homogène avec un espace en haut et en bas.
Resultat : ici
center : justify-content: center sert à regrouper les éléments au centre de la page.
Exemple avec une rangée (flex-direction: row) :
CSS : justify-content: center; dans section.
HTML : c'est automatique avec le selecteur "section". Dans cette ligne les blocs sont centrés
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : justify-content: center; dans section.
HTML : c'est automatique avec le selecteur "section". Dans la colonne, les blocks sont centrés.
Resultat : ici
flex-start : justify-content: flex-start sert à regrouper les éléments à droite de la rangée ou en haut de la colonne, sur la page.
Exemple avec une rangée (flex-direction: row) :
CSS : justify-content: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section".Sur la ligne, les bloks sont à gauche, en position de base.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : justify-content: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont regroupés en haut de la colonne, à gauche.
Resultat : ici
flex-end : justify-content: flex-end sert à regrouper les éléments à gauche de la rangée sur la page.
Exemple avec une rangée (flex-direction: row) :
CSS : justify-content: flex-end; dans section.
HTML: c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont regroupés à droite de la rangée.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : justify-content: flex-end; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont regroupés en bas de la colonne, à gauche.
Resultat : ici
space-between : justify-content: space-between sert à répartir les éléments de façon homogène, sans laisser d'espace à gauche et à droite, sur la rangée sur la page.
Exemple avec une rangée (flex-direction: row) :
CSS : justify-content: space-between; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène, sans laisser de marge à gauche et à droite, sur la rangée, en haut.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : justify-content: space-between; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène, sans laisser de marge en haut et en bas, sur la colonne, à gauche.
Resultat : ici
align-items : Alignement de l'axe secondaire.
sert à indiquer l'alignement sur l'axe vertical : axe secondaire. Il y en a plusieurs comme les différents exemples suivant:
center : align-items: center; sert à mettre un block principal au centre.
Exemple avec une rangée (flex-direction: row) :
CSS : align-items: center; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose, en block principal horizontal sont centrés verticalement.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-items: center; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose, en block principal vertical sont centrés horizontalement.
Resultat : ici
baseline : alignés sur la ligne de base (semblable à "flex-start);
Exemple avec une rangée (flex-direction: row) :
CSS : align-items: baseline; dans section.
HTML : c'est automatique avec le selecteur "section".
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-items: baseline; dans section.
HTML : c'est automatique avec le selecteur "section".
Resultat : ici
flex-end : alignés en bas, à droite.
Exemple avec une rangée (flex-direction: row), en bas :
CSS : align-items: flex-end; dans section.
HTML : c'est automatique avec le selecteur "section"t. L'axe principal en rangé est positionné en bas.
Resultat : ici
Exemple avec une colonne (flex-direction: column), à droite :
CSS : align-items: flex-end; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en colonne est positionné à droite.
Resultat : ici
flex-start : alignés en haut, à gauche.
Exemple avec une rangée (flex-direction: row), en haut :
CSS : align-items: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en rangé est positionné en haut.
Resultat : ici
Exemple avec une colonne (flex-direction: column), à gauche :
CSS : align-items: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en colonne est positionné à gauche.
Resultat : ici
stretch : les éléments sont étirés sur tout l'axe.
Pour ces exemples, il faut adapter le width ou le height aux protportions souhaitées.
Exemple avec une rangée (flex-direction: row) :
CSS : align-items: stretch; dans section.
HTML : c'est automatique avec le selecteur "section". La répartition c'est faite proportionnellement aux valeurs atribués sur la rangée.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-items: stretch; dans section.
HTML : c'est automatique avec le selecteur "section". La répartition c'est faite proportionnellement aux valeurs atribués sur la colonne.
Resultat : ici
Center : justify-content avec align-items. l'élément est au centre du block
CSS: .ontainer {display: flex; justify-content: center; align-items: center;}.
HTML : c'est automatique avec le selecteur "section". Par defaut, c'est une rangée qui est center au milieu du block.
Resultat : ici
align-content : répartition des blocks sur plusieurs lignes.
Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment celles-ci seront réparties avec align-content. Cette propriété n'a aucun effet s'il n'y a qu'une seule ligne dans la Flexbox. Il a été rajouter des blocks pour ces exercices.
stretch : en auto, étiré afin de remplir le conteneur.
Exemple avec une rangée (flex-direction: row) :
CSS : align-content: stretch; dans section.
HTML: c'est automatique avec le selecteur "section". La répartition c'est faite proportionnellement aux valeurs atribués sur la rangée.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: stretch; dans section.
HTML : c'est automatique avec le selecteur "section". La répartition c'est faite proportionnellement aux valeurs atribués sur la colonne.
Resultat : ici
flex-start : groupés au début
Exemple avec une rangée (flex-direction: row) :
CSS : align-content: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en rangé est positionné en haut, à gauche.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: flex-start; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en colonne est positionné à gauche, en haut.
Resultat : ici
flex-end : groupés à la fin
Exemple avec une rangée (flex-direction: row) :
CSS : align-content: flex-end; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en rangé est positionné en bas.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: flex-end; dans section.
HTML : c'est automatique avec le selecteur "section". L'axe principal en colonne est positionné à droite.
Resultat : ici
center : groupés au centre.
Exemple avec une rangée (flex-direction: row) :
CSS : align-content: center; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose, en block principal horizontal sont centrés verticalement.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: center; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose, en block principal vertical sont centrés horizontalement.
Resultat : ici
space-between : répartis sans laisser de marge au début et à la fin.
Exemple avec une rangée (flex-direction: row) :
CSS : align-items: space-between; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène, sans laisser de marge à gauche et à droite, sur la rangée, en haut.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: space-between; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène, sans laisser de marge en haut et en bas, sur la colonne, à gauche.
Resultat : ici
space-around : répartis en laissant de la marge au début et à la fin.
Exemple avec une rangée (flex-direction: row) :
CSS : align-items: space-around; dans section.
HTML: c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène sur la rangée, en haut.
Resultat : ici
Exemple avec une colonne (flex-direction: column) :
CSS : align-content: space-around; dans section.
HTML : c'est automatique avec le selecteur "section". Ici à l'intérieur du block vert, le block bleu, violet et rose sont réparties de façon homogène sur la colonne, à guache.
Resultat : ici
flex-wrap : retourne à la ligne (exemple avec flex-direction:column).
sert à rendre les éléments adaptable à tous écran et quand on reduit la largeur de la page.
warp :
Flex-warp: warp. les éléments seront positionnés en haut à gauche du block par défaut. Positionne les éléments vertical à la réduction de la largeur de la page : le premier de la rangée en haut est le dernier en bas. Mettre les width et height en "px" et non en "%".
CSS : flex-warp: warp; dans section.
HTML: c'est automatique avec le selecteur "section". Les éléments d'adapte au changement de taille d'écran. HTML :
Resultat : ici
warp-reverse :
flex-warp: warp-reverse. les éléments seront positionnés en bas à gauche du block par défaut. Positionne les éléments vertical à la réduction de la largeur de la page : le dernier de la rangée en haut est le premier en bas. Mettre les width et height en "px" et non en "%".
CSS : flex-warp: warp; dans section.
HTML: c'est automatique avec le selecteur "section". Les éléments d'adapte au changement de taille d'écran.
Resultat : ici
nowrap : flex-warp: nowarp. les éléments seront positionnés en bas à gauche du block par défaut. Ne positionne pas les éléments vertical à la réduction de la largeur de la page.
CSS : flex-warp: warp; dans section - CSS :
HTML : c'est automatique avec le selecteur "section". Les éléments ne s'adapte pas au changement de taille d'écran et dépasse du block vert.
Resultat : ici
gap : sert à donner une valeur entre les éléments : Exemple : 60px.
CSS : gap: 40px; dans section - CSS :
HTML : c'est automatique avec le selecteur "section". Les éléments ont un espace entre eux de 40px.
Resultat : ici
Propriétés d'un élément :
order : Cela permet de mettre les éléments dans l'ordre souhaité.
Exemple ici : placer l'élément n°1 (bleu) en 2ème position, l'élément n°2 (violet) en 3ème position et l'élément n°3 (rose) en 1ère position.
CSS : order: x; (x= position) les balises respective.
HTML : Mettre la class "b" pour le bleu, "v" pour le violet et "r" pour le rose dans leurs balises respectives.
Resultat : ici
flex : Cela permet à un block d'adapter sa largeur de façon homège aux autres éléments, pour que le tous soit répartie sur toute la largeur. Exemple ici sur le block bleu au milieu.
CSS : .b {order: 2; flex: 1;}.
HTML : c'est automatique vu que la balise a déjà été renseigné. Le block bleu occupe la place entre la rose et la violette de façon homogène.
Resultat : ici
Exemple de rendu avec un mix sur divers éléments :
CSS :
HTML :
Resultat : ici
