Podcast CSS – 010: Flexbox
Un modèle de conception qui peut être délicat dans le responsive design est la barre latérale qui s'intègre à certains contenus. Là où il y a de la fenêtre d'affichage, ce modèle fonctionne très bien, mais lorsque l'espace est condensé, cette mise en page rigide peut devenir problématique.
Le modèle de mise en page flexible (Flexbox) est un modèle de mise en page conçu pour du contenu unidimensionnel. Il excelle à prendre un ensemble d'éléments de différentes tailles et à renvoyer la meilleure mise en page pour ces éléments.
Il s'agit du modèle de mise en page idéal pour ce modèle de barre latérale. Flexbox permet non seulement d'aligner la barre latérale et le contenu de manière intégrée, mais également d'intégrer la barre latérale si l'espace disponible est insuffisant. Au lieu de définir des dimensions rigides que le navigateur doit respecter, avec Flexbox, vous pouvez indiquer des limites flexibles pour indiquer comment le contenu peut s'afficher.
Que pouvez-vous faire avec une mise en page flexible ?
Les mises en page Flex offrent les fonctionnalités suivantes, que vous découvrirez dans ce guide.
- Elles peuvent s'afficher sous la forme d'une ligne ou d'une colonne.
- Ils respectent le mode d'écriture du document.
- Il s'agit d'une seule ligne par défaut, mais il peut être demandé de s'encapsuler sur plusieurs lignes.
- Les éléments de la mise en page peuvent être réorganisés visuellement, loin de leur ordre dans le DOM.
- L'espace peut être réparti à l'intérieur des éléments. Ceux-ci deviennent plus grands en fonction de l'espace disponible dans l'élément parent.
- L'espace peut être réparti autour des éléments et des lignes flexibles dans une mise en page encapsulée à l'aide des propriétés de l'alignement de la case.
- Les éléments eux-mêmes peuvent être alignés sur l'axe transversal.
L'axe principal et l'axe transversal
Pour comprendre le Flexbox, il est essentiel de comprendre le concept d'axe principal et d'axe transversal.
L'axe principal est celui défini par votre propriété flex-direction
.
Si la valeur est row
, votre axe principal se trouve le long de la ligne, et si la valeur est column
, votre axe principal se trouve le long de la colonne.
Les éléments Flex se déplacent en tant que groupe sur l'axe principal. N'oubliez pas: nous avons un tas de choses et nous essayons d'obtenir la meilleure mise en page pour elles en tant que groupe.
L'axe transversal s'étend dans l'autre sens par rapport à l'axe principal. Par conséquent, si flex-direction
est défini sur row
, l'axe transversal s'étend le long de la colonne.
Vous pouvez faire deux choses sur l'axe transversal.
Vous pouvez déplacer les éléments individuellement ou de manière groupée afin qu'ils s'alignent les uns par rapport aux autres et au conteneur flexible. De plus, si vous avez des lignes flexibles encapsulées, vous pouvez les traiter comme un groupe pour contrôler la façon dont l'espace leur est attribué.
Vous verrez comment tout cela fonctionne en pratique tout au long de ce guide. Pour l'instant, n'oubliez pas que l'axe principal suit votre flex-direction
.
Créer un conteneur flexible
Voyons le comportement de Flexbox en prenant un groupe d'éléments de différentes tailles et en utilisant Flexbox pour les disposer.
<div class="container" id="container">
<div>One</div>
<div>Item two</div>
<div>The item we will refer to as three</div>
</div>
Pour utiliser Flexbox, vous devez déclarer que vous souhaitez utiliser un contexte de mise en forme flexible, et non une mise en page standard et une mise en page intégrée.
Pour ce faire, remplacez la valeur de la propriété display
par flex
.
.container {
display: flex;
}
Comme vous l'avez appris dans le guide de mise en page, vous obtenez une zone au niveau du bloc, avec des éléments enfants. Un certain comportement est immédiatement appliqué aux éléments Flexbox, à l'aide de leurs valeurs initiales.
Les valeurs initiales signifient que:
- Les articles s'affichent sur une ligne.
- Ils ne s'encapsulent pas.
- Elles ne poussent pas pour remplir le conteneur.
- Ils sont alignés au début du conteneur.
Contrôler l'orientation des éléments
Même si vous n'avez pas encore ajouté de propriété flex-direction
, les éléments s'affichent sous forme de ligne, car la valeur initiale de flex-direction
est row
.
Si vous voulez une ligne, vous n'avez pas besoin d'ajouter la propriété.
Pour changer de direction, ajoutez la propriété et l'une des quatre valeurs suivantes:
row
: les éléments sont disposés en ligne.- Avec
row-reverse:
, les éléments sont disposés sur une ligne en partant de la fin du conteneur flexible. column
: les éléments sont disposés sous forme de colonne.column-reverse
: les éléments sont disposés sous la forme d'une colonne à partir de la fin du conteneur flexible.
Vous pouvez tester toutes les valeurs à l'aide de notre groupe d'articles dans la démo ci-dessous.
Inverser la circulation des éléments et l'accessibilité
Soyez prudent lorsque vous utilisez des propriétés qui éloignent l'affichage visuel de l'ordre des éléments dans le document HTML, car cela peut avoir un impact négatif sur l'accessibilité.
Les valeurs row-reverse
et column-reverse
en sont un bon exemple.
La réorganisation ne se produit que pour l’ordre visuel, et non l’ordre logique.
Il est important de le comprendre, car l'ordre logique correspond à l'ordre dans lequel un lecteur d'écran lira le contenu à voix haute, et toute personne naviguant à l'aide du clavier suivra.
Dans la vidéo suivante, vous pouvez voir comment, dans une mise en page en lignes inversées, la tabulation entre les liens se déconnecte lorsque la navigation au clavier suit le DOM et non l'affichage visuel.
Ce problème peut être dû à tout ce qui peut modifier l'ordre des éléments dans Flexbox ou grille. Par conséquent, toute réorganisation doit inclure des tests approfondis afin de vérifier qu'elle ne complique pas l'utilisation de votre site pour certaines personnes.
Pour en savoir plus, consultez la page suivante :
Modes et direction d'écriture
Par défaut, les éléments Flex sont présentés sous forme de ligne. Une ligne s'exécute dans le sens où les phrases circulent dans votre mode d'écriture et dans la direction du script. Cela signifie que si vous travaillez en arabe, qui se lit de droite à gauche (rtl), les éléments s'aligneront sur la droite. L'ordre de tabulation commencera également sur la droite, car c'est ainsi que les phrases sont lues en arabe.
Si vous utilisez un mode d'écriture vertical, comme certaines polices de caractères japonaises, une ligne s'affichera verticalement, de haut en bas.
Essayez de modifier flex-direction
dans cette démonstration en utilisant un mode d'écriture verticale.
Par conséquent, le comportement par défaut des éléments Flex est lié au mode d'écriture du document. La plupart des tutoriels sont écrits en anglais ou dans un autre mode d'écriture horizontal, de gauche à droite. Ainsi, il est facile de supposer que les éléments Flex s'alignent sur la gauche et s'exécutent horizontalement.
Avec l'axe principal et l'axe transversal, ainsi que le mode d'écriture à prendre en compte, le fait de parler de start et de end plutôt que de haut, de bas, de gauche et de droite dans Flexbox peut être plus facile à comprendre. Chaque axe a un début et une fin. Le début de l'axe principal est appelé main-start. Nos éléments flexibles sont donc initialement alignés à partir du début principal. L'extrémité de cet axe est main-end. Le début de l'axe transversal est cross-end (début de l'axe transversal) et le début de l'axe transversal (cross-end).
Encapsuler des éléments flexibles
La valeur initiale de la propriété flex-wrap
est nowrap
.
Cela signifie que si l'espace dans le conteneur est insuffisant, les éléments dépasseront.
![Conteneur flexible contenant neuf éléments. Les éléments sont réduits, de sorte qu'un mot se trouve sur une ligne, mais il n'y a pas assez de place pour les afficher côte à côte. Les éléments flexibles se sont donc étendus en dehors du conteneur.](https://web.dev/static/learn/css/flexbox/image/a-flex-container-nine-it-e0d8b646b8c9c.jpg?authuser=6&hl=fr)
Les éléments qui s'affichent à l'aide des valeurs initiales seront réduits le plus possible, jusqu'à atteindre la taille min-content
avant un débordement.
Pour encapsuler les éléments, ajoutez flex-wrap: wrap
au conteneur flexible.
.container {
display: flex;
flex-wrap: wrap;
}
Lorsqu'un conteneur flexible est encapsulé, il crée plusieurs lignes flexibles. En termes de distribution de l'espace, chaque ligne agit comme un nouveau conteneur flexible. Par conséquent, si vous encapsulez des lignes, il n'est pas possible d'aligner un élément de la ligne 2 sur un élément de la ligne 1 au-dessus. C'est ce que signifie "Flexbox" qui est unidimensionnel. Vous pouvez contrôler l'alignement sur un axe, une ligne ou une colonne, mais pas les deux ensemble, comme c'est le cas dans la grille.
Le raccourci Flex-flow
Vous pouvez définir les propriétés flex-direction
et flex-wrap
à l'aide du raccourci flex-flow
.
Par exemple, pour définir flex-direction
sur column
et autoriser l'encapsulation des éléments:
.container {
display: flex;
flex-flow: column wrap;
}
Contrôler l'espace à l'intérieur des éléments Flex
En supposant que notre conteneur dispose de plus d'espace que nécessaire pour afficher les éléments, ceux-ci s'alignent au début et ne s'agrandissent pas pour occuper l'espace.
Elles cessent de croître au maximum de leur taille de contenu.
En effet, la valeur initiale des propriétés flex-
est la suivante:
flex-grow: 0
: les éléments ne poussent pas.flex-shrink: 1
: la taille des éléments peut être inférieure à celle de leurflex-basis
.flex-basis: auto
: la taille de base des éléments estauto
.
Elle peut être représentée par la valeur du mot clé flex: initial
.
La propriété abrégée flex
ou les termes longs flex-grow
, flex-shrink
et flex-basis
sont appliqués aux enfants du conteneur flexible.
Pour faire augmenter les éléments, tout en permettant aux éléments volumineux de disposer de plus d'espace que les petits, utilisez flex:auto
.
Vous pouvez essayer en utilisant la démo ci-dessus.
Les propriétés sont alors définies sur:
flex-grow: 1
: les éléments peuvent dépasserflex-basis
.flex-shrink: 1
: la taille des éléments peut être inférieure à leur valeurflex-basis
.flex-basis: auto
: la taille de base des éléments estauto
.
L'utilisation de flex: auto
signifie que les éléments ont des tailles différentes, car l'espace partagé entre les éléments est partagé après la disposition de chaque élément en tant que taille de contenu maximale.
Ainsi, un grand élément
occupera plus d'espace.
Pour forcer tous les éléments à avoir une taille cohérente et ignorer la taille du contenu, remplacez flex:auto
par flex: 1
dans la démo.
Cela se décompresse comme suit:
flex-grow: 1
: les éléments peuvent dépasserflex-basis
.flex-shrink: 1
: la taille des éléments peut être inférieure à leur valeurflex-basis
.flex-basis: 0
: la taille de base des éléments est0
.
L'utilisation de flex: 1
indique que tous les éléments ont une taille nulle. Par conséquent, tout l'espace du conteneur flexible peut être distribué.
Comme tous les éléments ont un facteur flex-grow
de 1
, ils croissent tous de la même manière et l'espace est partagé de manière égale.
Permettre aux articles de se développer à des rythmes différents
Vous n'avez pas besoin d'attribuer un facteur flex-grow
de 1
à tous les éléments.
Vous pouvez attribuer différents facteurs flex-grow
à vos éléments Flex.
Dans la démonstration ci-dessous, le premier élément contient flex: 1
, le deuxième flex: 2
et le troisième flex: 3
.
À mesure que ces éléments passent de 0
, l'espace disponible dans le conteneur flexible est partagé en six éléments.
Une partie est attribuée au premier élément,
deux parties au deuxième et trois parties au troisième.
Vous pouvez procéder de la même manière à partir d'un flex-basis
de auto
, mais vous devrez spécifier les trois valeurs.
La première valeur est flex-grow
, la deuxième flex-shrink
et la troisième flex-basis
.
.item1 {
flex: 1 1 auto;
}
.item2 {
flex: 2 1 auto;
}
Ce cas d'utilisation est moins courant, car l'utilisation d'une flex-basis
de auto
permet de permettre au navigateur de déterminer la répartition de l'espace.
Si vous souhaitez qu'un élément se développe un peu plus que ce que l'algorithme décide, quelle que soit la façon dont il pourrait être utile.
Réorganisation des éléments Flex
Vous pouvez réorganiser les éléments de votre conteneur Flex à l'aide de la propriété order
.
Cette propriété permet d'organiser les éléments dans des groupes ordinaux.
Les éléments sont disposés dans la direction indiquée par flex-direction
, en commençant par les valeurs les plus basses.
Si plusieurs éléments ont la même valeur, il sera affiché avec les autres éléments associés à cette valeur.
L'exemple ci-dessous illustre cet ordre.
Testez vos connaissances
Tester vos connaissances sur Flexbox
La valeur flex-direction
par défaut est
row
column
Par défaut, un conteneur flexible encapsule les enfants.
flex-wrap: wrap
avec display: flex
pour encapsuler les enfantsUn élément enfant Flex semble écrasé. Quelle propriété flexible permet d'atténuer ce problème ?
flex-grow
flex-shrink
flex-basis
Présentation de l'alignement de Flexbox
Flexbox s'accompagne d'un ensemble de propriétés permettant d'aligner des éléments et de répartir l'espace entre eux. Ces propriétés étaient si utiles qu'elles ont depuis été déplacées dans leur propre spécification que vous les rencontrerez également dans la mise en page sous forme de grille. Découvrez ici leur fonctionnement lorsque vous utilisez Flexbox.
L'ensemble de propriétés peut être réparti dans deux groupes. Propriétés de distribution de l'espace et propriétés d'alignement. Les propriétés qui répartissent l'espace sont les suivantes:
justify-content
: répartition de l'espace sur l'axe principal.align-content
: répartition de l'espace sur l'axe transversal.place-content
: raccourci permettant de définir les deux propriétés ci-dessus.
Les propriétés utilisées pour l'alignement dans Flexbox sont les suivantes:
align-self
: aligne un seul élément sur l'axe transversal.align-items
: aligne tous les éléments en tant que groupe sur l'axe transversal.
Si vous travaillez sur l'axe principal, les propriétés commencent par justify-
.
L'axe transversal commence par align-
.
Distribuer de l'espace sur l'axe principal
Avec le code HTML utilisé précédemment, les éléments Flex disposés sous forme de ligne, il y a de l'espace sur l'axe principal.
Les éléments ne sont pas assez grands pour remplir complètement le conteneur flexible.
Les éléments sont alignés au début du conteneur flexible, car la valeur initiale de justify-content
est flex-start
.
Les éléments sont alignés au début et tout espace supplémentaire se trouve à la fin.
Ajoutez la propriété justify-content
au conteneur flexible et attribuez-lui la valeur flex-end
. Les éléments s'affichent à la fin du conteneur et l'espace libre est placé au début.
.container {
display: flex;
justify-content: flex-end;
}
Vous pouvez également répartir l'espace entre les éléments avec justify-content: space-between
.
Essayez certaines des valeurs de la démonstration et consultez MDN pour connaître l'ensemble complet des valeurs possibles.
Avec flex-direction: column
Si vous avez remplacé votre flex-direction
par column
, justify-content
fonctionnera sur la colonne.
Pour disposer d'espace libre dans votre conteneur lorsque vous travaillez en tant que colonne, vous devez attribuer à votre conteneur un height
ou un block-size
.
Sinon, vous n'aurez pas d'espace libre pour le distribuer.
Testez les différentes valeurs, cette fois avec une mise en page de colonne Flexbox.
Répartir l'espace entre les lignes flexibles
Avec un conteneur flexible encapsulé, vous pouvez avoir de l'espace à répartir sur l'axe transversal.
Dans ce cas, vous pouvez utiliser la propriété align-content
avec les mêmes valeurs que justify-content
.
Contrairement à justify-content
, qui aligne les éléments sur flex-start
par défaut, la valeur initiale de align-content
est stretch
.
Ajoutez la propriété align-content
au conteneur flexible pour modifier ce comportement par défaut.
.container {
align-content: center;
}
Essayez dans la démo.
L'exemple contient des lignes d'éléments flexibles et le conteneur dispose d'un block-size
afin de disposer d'un espace libre.
Le raccourci place-content
Pour définir à la fois justify-content
et align-content
, vous pouvez utiliser place-content
avec une ou deux valeurs.
Une seule valeur sera utilisée pour les deux axes, si vous spécifiez que la première sera utilisée pour align-content
et la seconde pour justify-content
.
.container {
place-content: space-between;
/* sets both to space-between */
}
.container {
place-content: center flex-end;
/* wrapped lines on the cross axis are centered,
on the main axis items are aligned to the end of the flex container */
}
Aligner des éléments sur l'axe transversal
Sur l'axe transversal, vous pouvez également aligner vos éléments dans la ligne flexible à l'aide de align-items
et align-self
.
L'espace disponible pour cet alignement dépend de la hauteur du conteneur flexible (ou de la ligne flexible dans le cas d'un ensemble d'éléments encapsulés).
La valeur initiale de align-self
est stretch
. C'est pourquoi les éléments flexibles d'une ligne s'étirent par défaut jusqu'à la hauteur de l'élément le plus grand.
Pour modifier cela, ajoutez la propriété align-self
à tous vos éléments Flex.
.container {
display: flex;
}
.item1 {
align-self: flex-start;
}
Utilisez l'une des valeurs suivantes pour aligner l'élément:
flex-start
flex-end
center
stretch
baseline
Consultez la liste complète des valeurs sur MDN.
La démonstration suivante comporte une seule ligne d'éléments Flex avec flex-direction: row
.
Le dernier élément définit la hauteur du conteneur flexible.
Le premier élément a la propriété align-self
avec la valeur flex-start
.
Essayez de modifier la valeur de cette propriété pour voir comment elle se déplace dans son espace sur l'axe transversal.
La propriété align-self
est appliquée aux éléments individuels.
La propriété align-items
peut être appliquée au conteneur flexible pour définir toutes les propriétés align-self
individuelles en tant que groupe.
.container {
display: flex;
align-items: flex-start;
}
Dans cette démonstration, essayez de modifier la valeur de align-items
pour aligner tous les éléments de l'axe transversal en tant que groupe.
Pourquoi n'y a-t-il pas de raisonnement dans Flexbox ?
Les éléments Flex agissent comme un groupe sur l'axe principal. Il n'y a donc pas de concept de division d'un article individuel de ce groupe.
Dans la mise en page en grille, les propriétés justify-self
et justify-items
fonctionnent sur l'axe intégré pour aligner les éléments sur cet axe dans leur zone de grille.
En raison de la façon dont les mises en page Flex traitent les éléments comme un groupe, ces propriétés ne sont pas implémentées dans ce contexte.
Il est intéressant de noter que le Flexbox fonctionne très bien avec les marges automatiques.
Si vous avez besoin de séparer un élément d'un groupe ou de séparer le groupe en deux groupes, vous pouvez appliquer une marge.
Dans l'exemple ci-dessous, la marge gauche du dernier élément est de auto
.
La marge automatique absorbe tout l'espace dans la direction où elle est appliquée.
Cela signifie qu'il pousse l'élément vers la droite, ce qui divise les groupes.
Centrer un élément verticalement et horizontalement
Les propriétés d'alignement peuvent être utilisées pour centrer un élément dans une autre zone.
La propriété justify-content
aligne l'élément sur l'axe principal, à savoir la ligne. Propriété align-items
sur l'axe transversal.
.container {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
Testez vos connaissances
Tester vos connaissances sur Flexbox
.container { display: flex; direction: ltr; }
Pour aligner verticalement le Flexbox, utilisez
.container { display: flex; direction: ltr; }
Pour aligner horizontalement sur Flexbox, utilisez
.container { display: flex; direction: ltr; }
Par défaut, les éléments Flex sont alignés sur stretch
. Si vous souhaitez utiliser une taille de contenu pour les éléments enfants, lequel des styles suivants devez-vous utiliser ?
justify-content: flex-start
align-content: start
content
aligne les lignes flexibles, et non l'alignement des éléments enfants.height: auto
align-items: flex-start
Ressources
- La mise en page des boîtes flexibles dans le CSS MMD comprend une série de guides détaillés avec des exemples.
- Guide d'astuces CSS pour Flexbox
- Que se passe-t-il lorsque vous créez un conteneur Flexbox ?
- Tout ce que vous devez savoir sur l'alignement dans Flexbox
- Quelle est la taille de cette boîte flexible ?
- Cas d'utilisation de Flexbox
- Inspecter et déboguer les mises en page CSS Flexbox dans les outils pour les développeurs Chrome