Flexbox

The CSS Podcast - 010: Flexbox

Un modèle de conception qui peut être délicat en conception réactive est une barre latérale qui est alignée avec certains contenus. S'il y a un espace de fenêtre d'affichage, ce modèle fonctionne très bien, mais où l'espace est condensé, cette mise en page rigide peut devenir problématique.

Flexbox est un modèle de mise en page conçu pour les contenus unidimensionnels. Il excelle à prendre un tas d'éléments de différentes tailles et à renvoyer la meilleure mise en page pour ces éléments.

C'est le modèle de mise en page idéal pour ce modèle de barre latérale. Flexbox permet non seulement de mettre en page la barre latérale et le contenu en ligne, mais aussi de créer une nouvelle ligne lorsque l'espace restant est insuffisant. Au lieu de définir des dimensions rigides que le navigateur suive, avec Flexbox, vous pouvez définir des limites flexibles pour indiquer comment le contenu pourrait s'afficher.

Que pouvez-vous faire avec une mise en page flex ?

Les mises en page Flex présentent les fonctionnalités suivantes, que vous pourrez découvrir dans ce guide.

• Elles peuvent s'afficher sous forme de ligne ou de colonne.
• Elles respectent le mode d'écriture du document.
• Elles sont sur une seule ligne par défaut, mais vous pouvez demander à les afficher sur plusieurs lignes.
• Les éléments de la mise en page peuvent être réorganisés visuellement, indépendamment de leur ordre dans le DOM.
• L'espace peut être réparti à l'intérieur des éléments, afin qu'ils deviennent de plus en plus plus grands en fonction de l'espace disponible chez leur parent.
• L'espace peut être distribué autour des éléments et des lignes flex dans une mise en page en ligne, à l'aide des propriétés d'alignement de la boîte.
• Les éléments eux-mêmes peuvent être alignés sur l'axe transversal.

L'axe principal et l'axe transversal

Pour comprendre 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, l'axe principal se trouve le long de la ligne. Si elle est column, l'axe principal se trouve le long de la colonne.

Les éléments Flex se déplacent de manière groupée sur l'axe principal. N'oubliez pas que nous avons beaucoup de choses à faire et que nous essayons d'obtenir la meilleure mise en page pour eux en tant que groupe.

L'axe transversal s'étend dans l'autre sens que l'axe principal. Par conséquent, si flex-direction est row, l'axe transversal s'étend le long de la colonne.

Vous pouvez effectuer deux actions sur l'axe transversal. Vous pouvez déplacer les éléments individuellement ou en groupe afin qu'ils soient alignés les uns sur les autres et sur le circuit flexible. conteneur. De plus, si vous avez des lignes flexibles, vous pouvez traiter ces lignes comme un groupe pour contrôler la façon dont l'espace leur est attribué. Vous verrez comment tout cela fonctionne dans la pratique tout au long de ce guide. Pour l'instant, gardez à l'esprit que l'axe principal suit votre flex-direction.

Créer un conteneur flex

Voyons comment se comporte Flexbox en prenant un groupe d'éléments de différentes tailles et en utilisant Flexbox pour les mettre en page.

<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 flex et non une mise en page en ligne et en bloc standard. 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, cela vous donne une zone au niveau du bloc, avec des enfants d'éléments flex. Les éléments flex commencent immédiatement à présenter un comportement de flexbox, en utilisant leurs valeurs initiales.

Les valeurs initiales signifient que :

• Les éléments s'affichent sous forme de ligne.
• Elles ne s'enroulent pas.
• Elles ne se développent 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 souhaitez disposer d'une ligne, vous n'avez pas besoin d'ajouter la propriété. Pour changer de sens, ajoutez la propriété et l'une des quatre valeurs:

• row : les éléments sont disposés en ligne.
• row-reverse: : les éléments sont disposés en ligne à partir de la fin du conteneur Flex.
• column: les éléments sont présentés sous forme de colonnes.
• column-reverse : les éléments sont disposés sous forme de colonne à partir de l'extrémité du conteneur flexible.

Vous pouvez essayer toutes les valeurs à l'aide de notre groupe d'articles dans la démonstration ci-dessous.

Inverser le flux d'éléments et l'accessibilité

Vous devez faire preuve de prudence lorsque vous utilisez des propriétés qui réorganisent l'affichage visuel de manière différente de l'ordre 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. Le réordonnancement ne s'applique qu'à l'ordre visuel, et non à l'ordre logique. Il est important de le comprendre, car l'ordre logique est l'ordre dans lequel un lecteur d'écran lit à voix haute le contenu, et toute personne naviguant à l'aide du clavier suivra.

Vous pouvez voir dans la vidéo suivante comment, avec une mise en page en lignes inversées, l'utilisation de la touche de tabulation entre les liens se déconnecte, car la navigation au clavier suit le DOM et non l'aspect visuel. l'écran.

Tout élément pouvant modifier l'ordre des éléments dans une grille ou une flexbox peut entraîner ce problème. Par conséquent, toute réorganisation doit inclure des tests approfondis pour vérifier qu'elle ne rendra pas votre site difficiles à utiliser pour certaines personnes.

Pour en savoir plus, consultez cette page :

• Réorganiser le contenu
• La navigation au clavier et Flexbox se déconnectent

Modes et orientation d'écriture

Les éléments Flex sont organisés par défaut sous forme de ligne. Une ligne s'exécute dans le sens du flux des phrases dans votre mode d'écriture et dans l'orientation du script. Cela signifie que si vous travaillez en arabe, qui se lit de droite à gauche, les éléments s'alignent à droite. L'ordre des tabulations commence également à droite, car c'est ainsi que les phrases sont lues en arabe.

Si vous utilisez un mode d'écriture vertical, comme certaines polices japonaises, une ligne s'affiche verticalement, de haut en bas. Essayez de modifier le flex-direction dans cette démonstration qui utilise un mode d'écriture vertical.

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 rédigés en anglais ou dans un autre format horizontal, d'écriture de gauche à droite. Il serait ainsi facile de supposer que les éléments Flex sont alignés à gauche et s'exécutent horizontalement.

Avec l'axe principal, l'axe transversal et le mode d'écriture à prendre en compte, Le fait que nous parlons de start et de end plutôt que de haut, de bas, de gauche et de droite dans Flexbox pourrait être plus facile à comprendre. Chaque axe a un début et une fin. Le début de l'axe principal est appelé principal-start. Ainsi, nos articles flexibles sont initialement alignés depuis le démarrage principal. La fin de cet axe est main-end. Le début de l'axe transversal est cross-start et l'extrémité cross-end.

Encapsuler des éléments Flex

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éborderont.

<ph type="x-smartling-placeholder">

Les éléments affichés à l'aide des valeurs initiales seront réduits le plus possible. jusqu'à la taille min-content avant qu'un débordement ne se produise.

Pour que les éléments soient mis en ligne, ajoutez flex-wrap: wrap au conteneur flex.

.container {
  display: flex;
  flex-wrap: wrap;
}

Lorsqu'un conteneur flexible l'encapsule, il crée plusieurs lignes flexibles. En termes de distribution de l'espace, chaque ligne agit comme un nouveau conteneur flex. 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 situé au-dessus de lui dans la ligne 1. C'est ce que l'on entend par "flexbox" étant unidimensionnel. Vous pouvez contrôler l'alignement sur un axe, une ligne ou une colonne, et non les deux ensemble, comme avec une grille.

Abréviation du flux flex

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 les éléments à encapsuler:

.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 se développent pas pour remplir l'espace. Elles cessent de s'agrandir à la taille maximale autorisée. En effet, la valeur initiale des propriétés flex- est la suivante :

• flex-grow: 0 : les éléments ne se développent pas.
• flex-shrink: 1: les éléments peuvent être plus petits que leur flex-basis.
• flex-basis: auto : la taille de base des éléments est auto.

Cela peut être représenté par une valeur de mot clé flex: initial. La propriété abrégée flex ou les valeurs longues de flex-grow, flex-shrink et flex-basis sont appliquées aux enfants du conteneur flex.

Pour que les éléments se développent, tout en permettant aux éléments volumineux de disposer de plus d'espace que les petits, utilisez flex:auto. Vous pouvez essayer cela à l'aide de la démonstration ci-dessus. Cela définit les propriétés sur:

• flex-grow: 1: la taille des éléments peut dépasser flex-basis.
• flex-shrink: 1 : les éléments peuvent être réduits à une taille inférieure à leur flex-basis.
• flex-basis: auto : la taille de base des éléments est auto.

Si vous utilisez flex: auto, les articles sont proposés dans des tailles différentes, car l'espace partagé entre les éléments est partagé après la disposition de chaque élément max-content size. Ainsi, un élément volumineux 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émonstration.

Cette opération décompresse le fichier :

• flex-grow: 1: la taille des éléments peut dépasser flex-basis.
• flex-shrink: 1: la taille des éléments peut être inférieure à leur flex-basis.
• flex-basis: 0: les éléments ont une taille de base de 0.

L'utilisation de flex: 1 indique que tous les éléments ont une taille nulle. Par conséquent, tout l'espace du conteneur Flex peut être distribué. Étant donné que tous les éléments ont un facteur flex-grow de 1, ils se développent tous de manière égale et l'espace est partagé de manière égale.

Permettre une croissance des éléments à des rythmes différents

Il n'est pas nécessaire de définir un facteur flex-grow de 1 pour tous les éléments. Vous pouvez définir différents facteurs flex-grow pour vos articles modulables. Dans la démonstration ci-dessous, le premier élément comporte flex: 1, le deuxième flex: 2 et le troisième flex: 3. À mesure que ces éléments augmentent à partir de 0, l'espace disponible dans le conteneur flexible est partagé en six éléments. Une partie est donnée au premier élément, deux parties à la seconde, en trois parties.

Vous pouvez faire la même chose à partir d'un flex-basis de auto, mais vous devrez spécifier les trois valeurs. La première valeur étant flex-grow, la deuxième flex-shrink et la troisième flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Il s'agit d'un cas d'utilisation moins courant, car une flex-basis de auto est utilisée. est de permettre au navigateur de comprendre la répartition de l'espace. Toutefois, si vous souhaitez que l'algorithme fasse croître un élément un peu plus que ce qu'il décide, cela peut être utile.

Réorganiser 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, les valeurs les plus basses en premier. Si plusieurs éléments ont la même valeur, il est affiché avec les autres éléments ayant la même valeur.

L'exemple ci-dessous illustre ce tri.

Vérifier vos connaissances

Tester vos connaissances sur Flexbox

Présentation de l'alignement Flexbox

Flexbox a apporté un ensemble de propriétés permettant d'aligner les é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 vers leur propre spécification. Vous les trouverez également dans la mise en page en grille. Découvrez ici comment ils fonctionnent lorsque vous utilisez Flexbox.

Cet ensemble de propriétés peut être divisé en 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 : distribution de l'espace sur l'axe principal.
• align-content : distribution 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 groupe sur l'axe transversal.

Si vous travaillez sur l'axe principal, les propriétés commencent par justify-. Sur l'axe transversal, ils commencent par align-.

Répartition de l'espace sur l'axe principal

Avec le code HTML utilisé précédemment, les éléments Flex disposés en 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 Flex. Les éléments s'alignent au début du conteneur Flex, car la valeur initiale de justify-content est flex-start. Les éléments sont alignés au début et tout espace supplémentaire est à la fin.

Ajoutez la propriété justify-content au conteneur Flex, attribuez-lui la valeur flex-end, et les éléments s'alignent à la fin du conteneur, et l'espace disponible est placé au début.

.container {
  display: flex;
  justify-content: flex-end;
}

Vous pouvez également répartir l'espace entre les éléments à l'aide de justify-content: space-between.

Essayez certaines valeurs de la démonstration, et consultez MDN pour obtenir la liste complète des valeurs possibles.

Avec flex-direction: column

Si vous avez défini votre flex-direction sur column, alors justify-content fonctionnera sur la colonne. Pour disposer d'espace libre dans votre conteneur lorsque vous travaillez en tant que colonne, vous devez lui attribuer une height ou block-size. Sinon, vous n'aurez pas d'espace libre à distribuer.

Essayez les différentes valeurs, cette fois avec une mise en page en colonnes Flexbox.

Répartir l'espace entre les lignes flexibles

Avec un conteneur flex enveloppé, vous pouvez avoir de l'espace à distribuer 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 flex pour modifier ce comportement par défaut.

.container {
  align-content: center;
}

Essayez-le dans la démonstration. L'exemple comporte des lignes de retour à la ligne d'éléments Flex, et le conteneur comporte un block-size afin de disposer d'espace supplémentaire.

Raccourci place-content

Pour définir à la fois justify-content et align-content, vous pouvez utiliser place-content avec l'un d'eux ou deux valeurs. Une seule valeur sera utilisée pour les deux axes, Si vous spécifiez à la fois le premier est utilisé pour align-content et le second 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 sur la ligne flexible en utilisant align-items. et align-self. L'espace disponible pour cet alignement dépend de la hauteur du conteneur flexible, dans le cas d'un ensemble d'articles encapsulé.

La valeur initiale de align-self est stretch, c'est pourquoi les éléments Flex d'une ligne sont étirés par défaut jusqu'à la hauteur de l'élément le plus grand. Pour modifier cela, ajoutez la propriété align-self à l'un de 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 flexibles avec flex-direction: row. Le dernier élément définit la hauteur du conteneur flexible. Le premier élément possède la propriété align-self avec une valeur de 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 s'applique à des é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 la prochaine démonstration, essayez de modifier la valeur de align-items pour aligner tous les éléments sur la croix. en tant que groupe.

Pourquoi n'y a-t-il pas de justification dans Flexbox ?

Les éléments Flex agissent comme un groupe sur l'axe principal. Il n'est donc pas possible de diviser un élément individuel de ce groupe.

En mode Grille, les propriétés justify-self et justify-items s'appliquent à l'axe aligné. d’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 en tant que groupe, ces propriétés ne sont pas implémentées dans un contexte flex.

Sachez que Flexbox fonctionne très bien avec les marges automatiques. Si vous avez besoin de séparer un élément d'un groupe, ou séparez le groupe en deux groupes, vous pouvez appliquer une marge pour ce faire. Dans l'exemple ci-dessous, le dernier élément a une marge gauche 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 permettent de centrer un élément dans une autre zone. La propriété justify-content aligne l'élément sur l'axe principal, qui est une 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;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

Ressources

• La page MDN CSS Flexible Box Layout comprend une série de guides détaillés avec des exemples.
• Guide CSS Tricks sur 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