Introduction à la création de Flexbox Css
Composition d'une Flexbox Css
Une Flexbox Css est composée d'un conteneur Flexbox Css qui contient les éléments flexibles.
Le conteneur Flexbox est déclaré avec la propriété Css display : flex pour un comportement de type bloc ou display : inline-flex pour un comportement de type inline.
Tous ses fils directs deviennent alors des éléments flexibles Css avec un comportement de type bloc.
Pour rendre plus compatible le conteneur Flexbox Css, vous devez aussi déclarer d'autres valeurs pour la propriété Css display.
display : -webkit-box; /* -webkit-inline-box */
display : -ms-flexbox; /* -ms-inline-flexbox */
display : flex; /* inline-flex */Les règles à connaître
Les pseudo-elements :first-line et :first-letter ne peuvent être appliqués sur le conteneur Flexbox Css.
Les propriétés clear, float et vertical-align des éléments flexibles sont ignorées.
La propriété Css direction et la propriété CSS writing-mode, influencent le sens de certaines propriétés Css de Flexbox Css.
Les marges extérieures (margin) des éléments flexibles ne fusionnent pas entre elles.
Vocabulaires pour comprendre les définitions Css
Dans les définitions des propriétés Css de Flexbox Css, nous utilisons un vocabulaire spécifique tel que l'axe principal, ou l'axe transversal. Vous trouverez ci-dessous un schéma de ce vocabulaire :
Les éléments flexibles sont regroupés dans un conteneur virtuel que l'on nommera ligne de flexibles ou colonne de flexibles. Lors d'un retour automatique, les éléments flexibles qui vont à la ligne ou à la colonne forment une nouvelle ligne de flexibles ou colonne de flexibles.
Comment créer une Flexbox Css de colonnes ou de lignes?
A savoir
Les éléments flexibles dans leur conteneur Flexbox Css peuvent s'agencer de façon :
- verticale, les éléments flexibles seront l'un en dessous de l'autre. On parlera de gestions par colonne. Le retour automatique se fera à la colonne suivante.
- horizontale, les éléments flexibles seront l'un à côté de l'autre. On parlera de gestions par ligne. Le retour automatique se fera à la ligne suivante.
Un conteneur Flexbox peut contenir un autre conteneur Flexbox Css.
<div class="conteneur-flexbox">
<span class="item-flexbox">flexible 1</span>
<span class="item-flexbox">flexible 2</span>
<span class="item-flexbox">flexible 3</span>
</div>Créer une Flexbox Css de colonnes
Pour spécifier que les éléments flexibles doivent être l'un à côté de l'autre pour former des colonnes sur une ligne (hors retour automatique), vous devez spécifier flex-direction à row sur le conteneur Flexbox Css.
La hauteur des éléments flexibles est dépendante de la valeur de la propriété Css align-items.
.conteneur-flexbox{
/* display code */;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal; /* reverse */
-ms-flex-direction : row; /* row-reverse */
flex-direction : row; /* row-reverse */
}Exemple d'une Flexbox Css en colonnes inversées :
Créer une Flexbox Css de lignes
Pour spécifier que les éléments flexibles doivent être l'un en dessous de l'autre pour former des lignes sur une colonne (hors retour automatique), vous devez spécifier flex-direction à column sur le conteneur Flexbox Css.
La longueur des éléments flexibles est dépendante de la valeur de la propriété Css align-items.
.conteneur-flexbox{
/* display code */;
-webkit-box-orient : vertical ;
-webkit-box-direction : normal; /* reverse */
-ms-flex-direction : column; /* column-reverse */
flex-direction : column; /* column-reverse */;
}Exemple d'une Flexbox Css en lignes inversées :
Ce que vous devez voir :
L'influence de writing-mode et de direction
Suivant la valeur de direction, row et row-reverse s'inversent.
Pour la valeur de la propriété CSS writing-mode :
-
horizontal-tb, le sens du texte est horizontal, c'est dire qui définie le sens. - Dans le cas de
rowl'axe principal est horizontal et pourcolumnil est vertical. -
vertical-rl, déroulement du contenu se fait de droite à gauche et le sens du texte est haut en bas. - Dans le cas de
rowl'axe principal est vertical et pourcolumnil est horizontal. -
vertical-lr, déroulement du contenu se fait de gauche à droite et le sens du texte est haut en bas. Dans le cas derowl'axe principal est vertical et pourcolumnil est horizontal.
Comment gérer les retours automatiques dans une Flexbox Css?
Gérer les retours automatiques dans une Flexbox Css
Par défaut, les retours automatiques ne sont pas autorisés dans une Flexbox Css, mais vous pouvez les autoriser en spécifiant la propriété Css flex-wrap à wrap sur le conteneur Flexbox.
.conteneur-flexbox{
/* display code */;
-ms-flex-wrap : wrap; /* wrap-reverse */
flex-wrap : wrap; /* wrap-reverse */
}Exemple d'une Flexbox Css en ligne avec retour automatique :
Retours automatiques dans Flexbox Css de colonnes
Lorsque le retour automatique est autorisé dans Flexbox Css de colonnes, l'élément flexible Css qui ne peut être mis sur la ligne passe à la ligne suivante en s'alignant sur la gauche. L'élément flexible suivant s'affichera à côté s'il a la place, sinon il passe à la ligne de suivante, etc.
Retours automatiques dans Flexbox Css de lignes
Le retour automatique ne peut se faire dans Flexbox Css de lignes que si le conteneur Flexbox Css à une hauteur spécifiée.
Lorsque le retour automatique est autorisé dans Flexbox Css de lignes, l'élément flexible Css passe à la colonne de droite suivante. L'élément flexible suivant s'affichera en dessous s'il a la place, sinon il passe à la colonne de droite suivante, etc.
Sachez que dans le cas de retours automatiques dynamique, si les éléments flexibles n'ont pas de width spécifiés ou différentes, vous ne pourrez à priori pas prévoir la largeur des futures colonnes ajoutées.
Comment gérer l'alignement sur l'axe transversal du bloc formé par les retours automatiques dans le conteneur Flexbox?
Le fait d'autoriser les retours automatiques, cela déclenche la prise en compte de la propriété Css align-content, qui n'est pas prise en compte dans le cas contraire.
La propriété Css align-content va vous permettre de spécifier la manière dont est redistribué l'espace restant sur l'axe transversal sur le bloc formé par les diverses lignes de flexible ou colonnes de flexibles dû au retour automatique.
Par exemple, vous pouvez décider que l'ensemble de lignes ou colonnes de flexibles dû au retour automatique soit aligné au centre de l'élément conteneur.
Son comportement peut être comparé à la propriété Css justify-content qui elle gère les alignements sur l'axe principal.
.conteneur-flexbox-css{
-ms-flex-line-pack : center;
align-content : center;
}Exemple d'une Flexbox Css en colonnes avec align-content : center :
flexible 2 flexible 3 flexible 4
flexible 4 flexible 5 flexible 6
Exemple d'une Flexbox Css en ligne avec align-content : center :
Problème de compatibilité avec les préfixes align-content
Si vous désirez rendre plus compatible cette gestion de l'espace restant, vous devrez utiliser entre autres :
-
-ms-flex-line-pack
-ms-flex-line-pack : start|end|center|justify|distribute;
align-content : flex-start|flex-end|center|space-between|space-around;Comment définir un ordre d'affichage des éléments flexibles?
Changer l'ordre d'affichage par défaut des éléments flexibles
La règle d'affichage se fait du numéro le plus bas vers le numéro le plus haut.
Si plusieurs éléments flexibles Css du conteneur Flexbox Css ont le même ordre, c'est l'ordre dans lequel ils apparaissent dans le document source qui est pris.
Par défaut, chaque élément flexible à un ordre de 0.
Il est possible de redéfinir cet ordre en spécifiant la propriété Css order à un entier positif sur l'élément flexible.
<div class="conteneur-flexbox">
<span class="item-flexbox-3">flexible 1</span>
<span class="item-flexbox-1">flexible 2</span>
<span class="item-flexbox-2">flexible 3</span>
</div>.item-flexbox-1{
-webkit-box-ordinal-group : 1; /* ne peut être négatif, valeur de order +1 */
-ms-flex-order : 0; /* ne peut être négatif */
order : 0;
}
.item-flexbox-2{
-webkit-box-ordinal-group : 0;
-ms-flex-order : 1; /* ne peut être négatif */
order : 1;
}
.item-flexbox-3{
-ms-flex-order : 2 /* ne peut être négatif */
order : 2;
}Exemple d'une Flexbox Css en colonne avec changement de l'ordre des éléments flexibles :
Exemple d'une Flexbox Css en ligne avec changement de l'ordre des éléments flexibles :
Comment gérer l'alignement des éléments flexibles en eux?
Gérer l'alignement des éléments flexibles en eux
Vous pouvez gérer l'alignement des éléments flexibles entre eux sur l'axe transversal au sein la ligne ou colonne de flexibles Css en utilisant la propriété Css align-items et redéfinir l'alignement de l'élément flexible Css avec la propriété Css align-self si besoin.
Exemple d'une Flexbox Css en colonnes avec align-items : stretch :
flexible 2 flexible 3 flexible 4
flexible 4 flexible 5 flexible 6
Exemple d'une Flexbox Css en colonnes avec align-items : flex-start :
flexible 2 flexible 3 flexible 4
flexible 4 flexible 5 flexible 6
Exemple d'une Flexbox Css en ligne avec align-items : stretch:
Exemple d'une Flexbox Css en ligne avec align-items : flex-start :
Impact de align-items sur la hauteur ou la longueur de l'élément flexible Css
Par défaut, la propriété Css align-items à la valeur de stretch, c'est-à-dire que chaque élément flexible est étiré afin que sa taille (margin incluses) prenne toute la hauteur* ou longueur* de sa ligne* ou colonne* tout en respectant les contraintes imposées par height, min-height, max-height et width, min-width, max-width.
*)Cela impacte:
- la longueur des éléments flexibles Css, pour la valeur de
flex-direction : column, - la hauteur des éléments flexibles Css, pour la valeur de
flex-direction : row.
Comment gérer l'espace encore restant dans la Flexbox sur l'axe principal?
Gérer les espacements entre les éléments flexibles
Dans le cas où une fois que le calcul de flexibilité est effectué, il vous reste encore de l'espace sur l'axe principal, ce dernier peut être redistribué entre les éléments flexibles.
Il est possible de spécifier le mode de redistribution de l'espace restant en spécifiant la propriété Css justify-content sur le conteneur Flexbox Css. Je vous laisse allez voir les valeurs possibles.
Son comportement peut être comparé à la propriété Css align-content qui elle gère les alignements sur l'axe transversal.
.conteneur-flexbox{
/* display code */;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.conteneur-flexbox{
/* display code */;
-webkit-box-pack: justify ;
-ms-flex-pack: justify ;
justify-content: space-between ;
}
.conteneur-flexbox{
/* display code */;
-ms-flex-pack: distribute;
justify-content: space-around ;
}Exemple d'une Flexbox en ligne avec gestion des espaces entre les éléments flexibles :
Ce que vous devez voir :
Exemple d'une Flexbox en ligne avec gestion des espaces entre les éléments flexibles :
Ce que vous devez voir :
Problème de compatibilité avec les préfixes justify-content
Si vous désirez rendre plus compatible cette gestion de espace restant, vous devrez utiliser entre autres :
-
-webkit-box-pack -
-ms-flex-pack
-webkit-box-align: start|end|center|justify;
-ms-flex-align: start|end|center|justify;
justify-content: flex-start|flex-start|center|space-between;
/* ou */
/* pas d'ééquivalent de space-around pour -webkit-box-align */
-ms-flex-align: distribute ;
justify-content: space-around;Comment gérer la flexibilité au sein d'une Flexbox Css?
La propriété Css flex gère les règles de flexibilités
C'est le raccourci de propriété Css flex mis sur le l'élément flexible qui va spécifier :
- le facteur d'agrandissement d'un élément flexible,
- le facteur de réduction d'un élément flexible,
- la taille initiale d'un élément flexible avant application du facteur d'agrandissement ou de réduction.
auto. Suivant la valeur de direction flex-direction, la taille initiale précisée représente :- pour
row[-reverse], la longueur (width). - pour
column[-reverse], la hauteur (height).
Le facteur d'agrandissement de la taille initiale en cas de redistribution de l'espace restant, peut être définit individuellement avec la propriété Css flex-grow.
Le facteur de réduction de la taille initiale en cas où la taille totale des éléments flexibles est supérieure à la taille du conteneur Flexbox Css, peut être définit individuellement avec la propriété Css flex-shrink
La taille initiale désirée d'un élément flexible, peut être définit individuellement avec la propriété Css flex-basis.
Vous comprendrez mieux, l'utilisation de chaque propriété dans le chapitre suivant "Comment est calculé la taille d'un élément flexible?".
Problème de compatibilité avec les préfixes Css flex
Si vous désirez rendre plus compatible cette gestion de flexibilité, vous devrez utiliser entre autres :
-
-webkit-box-flex, -
-ms-flex.
-ms-flex par défaut, autorise l'agrandissement mais pas réduction.-webkit-box-flex par défaut, autorise l'agrandissement et réduction et on ne peut pas différencier les deux.Vous devrez donc obligatoirement unifier les valeurs des propriétés préfixées avec celles de
flex.-webkit-box-flex : 1;
-ms-flex : 1 1 0%;
flex : 1 1 0%
/* ou */
-webkit-box-flex : 0;
-ms-flex : 0 0 auto;
flex : 0 0 auto;Comment est calculé la taille d'un élément flexible?
Comprende comment est calculé la taille d'un élément
Voici une petite explication sur la manière dont est calculé la taille des éléments flexibles Css au sein d'un conteneur Flexbox Css.
D'abord, il faut calculer l'espace initial pris par les éléments flexibles :Espace restant = Taille du conteneur Flexbox - (Somme flex-basis calculé des éléments flexibles)
Si l'Espace restant est négatif alors on applique le calcul de réduction flex-shrink, si l'Espace restant est supérieur 0, alors c'est le calcul d'agrandissement de flex-grow que l'on appliquera.
Vous trouverez un article en anglais plus détaillé sur : Flexbox adventures
Le calcul de flex-basis d'un élément flexible
Dans le calcul de la valeur du flex-basis d'éléments flexibles Css, vous devez y inclure les margin si elles ont été précisées, sinon elles prendront la valeur de 0, idem si la/les valeurs de margin sont en auto.
Petit rappel : dans les Flexbox Css, les marges extérieures (margin) des éléments flexibles ne fusionnent pas entre elles.
Si flex-basis à une valeur avec unité, alors c'est cette dernière qui sera prise :valeur calculée de flex-basis = valeur de flex-basis + marges en px
Si flex-basis à une valeur auto et que la valeur de taille (width ou height) est précisée, alors c'est cette dernière qui sera prise :valeur calculée de flex-basis = valeur de taille + marges en px
Si flex-basis à une valeur auto et que la valeur de taille (width ou height) est précisée en auto, alors c'est la taille calculée du contenu qui sera prise :valeur calculée de flex-basis = valeur de taille du contenu + marges en px
min-[taille] ou max-[taille], ne sont pas pris en compte pour le calcul de flex-basis, mais dans le résultat final de la taille de l'élément flexible.
Le calcul de réduction flex-shrink d'un élément flexible
Dans le cas d'une réduction d'éléments flexibles dans une Flexbox Css, vous devez calculer la taille de la réduction : Taille de la réduction = (flex-shrink * flex-basis) / (SOMME DES(flex-shrink * valeur calculée de flex-basis)) * Espace restant
Il ne vous reste plus qu'a soustraire la Taille de la réduction.Taille finale = valeur calculée de flex-basis - Taille de la réduction
Exemple concert :
.flex-container{ width : 650px }
.flex-shrink-1{ flex-shrink:1; flex-basis : 250px}
.flex-shrink-4{ flex-shrink:4; flex-basis : 250px}
.flex-shrink-6{ flex-shrink:6; flex-basis : 250px}<div class="flex-container">
<div class="flex-shrink-1"><b>flex-shrink : 1; </b></div>
<div class="flex-shrink-4"><b>flex-shrink : 4; </b></div>
<div class="flex-shrink-6"><b>flex-shrink : 6; </b></div>
</div>Espace restant :
650 - (250 + 250 +250) soit -100
SOMME DES(flex-shrink * flex-basis):
(1 * 250) + (4 * 250) + (6 * 250) soit 2750
Taille de la réduction pour le 1er :
(1 * 250) / 2750 * -100 soit -9.0909090909090909090909090909091 arrondi pour l'exemple à 9
Taille de la réduction pour le 2eme :
(4 * 250) / 2750 * -100 soit -36.363636363636363636363636363636 arrondi pour l'exemple à 36
Taille de la réduction pour le 3eme :
(6 * 250) / 2750 * -100 soit -54.545454545454545454545454545455 arrondi pour l'exemple à 55
Taille finale pour le 1er :
250 - 9 soit environ 241
Taille finale pour le 2eme :
250 - 36 soit environ 214
Taille finale pour le 3eme :
250 - 55 soit environ 195
Attention dans le cas où, il y a au moins une margin en auto, ce n'est pas la taille de l'élément flexible qui change, mais la/les marges extérieures en valeur auto.
Le calcul de l'agrandissement flex-grow d'un élément flexible
Dans le cas d'une réduction d'éléments flexibles dans une Flexbox Css, vous devez calculer la taille de grossissement :Unité de grossissement = Espace restant /(Somme des valeurs de flex-grow des éléments flexibles)
A partir de là, vous êtes capable de acculer la taille chaque élément flexible au sein d'un conteneur Flexbox Css.Taille de l'élément flexible = valeur calculée du flex-basis + (Unité de grossissement * flex-grow de l'élément flexible)
Exemple concert :
.flex-container{ width : 350px }
.flex-grow-1{ flex-grow :1; flex-basis : 50px}
.flex-grow-4{ flex-grow :4; flex-basis : 50px}
.flex-grow-6{ flex-grow :6; flex-basis : 50px}<div class="flex-container">
<div class="flex-grow-1"><b>flex-grow : 1; </b></div>
<div class="flex-grow-4"><b>flex-grow : 4; </b></div>
<div class="flex-grow-6"><b>flex-grow : 6; </b></div>
</div>Espace restant :
350 - (50 + 50 + 50) soit 200
SOMME DES(flex-grow):
1 + 4 + 6 soit 11
Espace restant /(Somme des valeurs de flex-grow des éléments flexibles)
200 / 11 soit 18.18181818181818
Taille de la réduction pour le 1er :
1 * 18.18181818181818 soit 18.18181818181818 arrondi pour l'exemple à 18
Taille de la réduction pour le 2eme :
4 * 18.18181818181818 soit 72.72727272727273 arrondi pour l'exemple à 72
Taille de la réduction pour le 3eme :
6 * 18.18181818181818 soit 109.0909090909091 arrondi pour l'exemple à 109
Taille finale pour le 1er :
50 + 18 soit environ 68
Taille finale pour le 2eme :
50 + 72 soit environ 122
Taille finale pour le 3eme :
50 + 109 soit environ 159
Attention dans le cas où, il y a au moins une margin en auto, ce n'est pas la taille de l'élément flexible qui change, mais la/les marges extérieures en valeur auto.
Récapitulatif des propriétés qui influencent les dimensions d'un élément flexible Css
Influences des propriétés de Flexbox Css sur la taille
Plusieurs propriétés Css de Flexbox Css vont intervenir sur le calcul de la taille d'un élément flexible :
- le facteur d'agrandissement de la taille initiale, en cas de redistribution de l'espace restant définit par
flex-grow. Par défaut n'est pas autorisé. - le facteur de réduction de la taille initiale, en cas où la taille totale des éléments flexibles est supérieure à la taille du conteneur Flexbox Css, et défini par
flex-shrink. Par défaut est autorisée avec un facteur de réduction de 1. - la taille initiale désirée d'un élément flexible, défini
flex-basis. Par défautauto, c'est-à-dire que l'on prend la valeur calculée dewidthouheightsuivant le type de Flexbox Css. - la gestion des espaces entre éléments flexibles, définie par
justify-content. - l'autorisation des retours automatiques, définie par
flex-wrap. Par défaut n'est pas autorisé. - les valeurs min/max et
widthouheightdéfinis sur élément flexible Css.
flex-shrink, flex-shrink et flex-basis vont influencer dans le cas d'un conteneur Flexbox Css de type : - colonnes : la longueur des éléments flexibles,
- lignes : la hauteur des éléments flexibles.
align-content va influencer dans le cas d'un conteneur Flexbox de type : - colonnes : la hauteur des éléments flexibles,
- lignes : la longueur des éléments flexibles.
flex-wrap va influencer dans le cas d'un conteneur Flexbox Css de type .- colonnes : la hauteur des éléments flexibles,
- lignes : la longueur des éléments flexibles.
Sur l'axe transversal
Plusieurs propriétés Css de Flexbox Css vont intervenir sur le calcul de la taille d'un élément flexible :
- le facteur d'agrandissement de la taille initiale, en cas de redistribution de l'espace restant définit par
flex-grow. Par défaut n'est pas autorisé. - le facteur de réduction de la taille initiale, en cas où la taille totale des éléments flexibles est supérieure à la taille du conteneur Flexbox Css, et défini par
flex-shrink. Par défaut est autorisée avec un facteur de réduction de 1. - la taille initiale désirée d'un élément flexible, défini
flex-basis. Par défautauto, c'est-à-dire que l'on prend la valeur calculée dewidthouheightsuivant le type de Flexbox Css. - la gestion des espaces entre éléments flexibles, définie par
justify-content. - l'autorisation des retours automatiques, définie par
flex-wrap. Par défaut n'est pas autorisé. - les valeurs min/max et
widthouheightdéfinis sur élément flexible Css.
flex-shrink, flex-shrink et flex-basis vont influencer dans le cas d'un conteneur Flexbox Css de type : - colonnes : la longueur des éléments flexibles,
- lignes : la hauteur des éléments flexibles.
align-content va influencer dans le cas d'un conteneur Flexbox de type : - colonnes : la hauteur des éléments flexibles,
- lignes : la longueur des éléments flexibles.
flex-wrap va influencer dans le cas d'un conteneur Flexbox Css de type .- colonnes : la hauteur des éléments flexibles,
- lignes : la longueur des éléments flexibles.
Liens utiles sur les Flexbox Css
Ressources sur les Flexbox Css
Bac à sable pour tester les Flexbox Css : Générateur de Flexbox Css3.
Les bugs connus de Flexbox CSS et la manière de les contourner : Flexbugs (en).
Informations sur la manière dont est calculé les éléments flexibles Css : Flexbox adventures (en).