Flexbox

Podcast CSS – 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 dans la prise d’un tas d’éléments de tailles différentes, et renvoient 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 d'aligner la barre latérale et le contenu de façon intégrée, mais s'il n'y a pas assez d'espace restant, la barre latérale s'ouvre sur une nouvelle ligne. Au lieu de définir des dimensions rigides que le navigateur suivra, avec Flexbox, vous pouvez définir des limites flexibles pour indiquer comment le contenu pourrait s'afficher.

À quoi sert une mise en page flexible ?

Les mises en page Flex présentent les fonctionnalités suivantes : que vous découvrirez dans ce guide.

• Elles peuvent s'afficher sous forme de ligne ou de colonne.
• Elles respectent le mode d'écriture du document.
• Il s'agit d'une seule ligne par défaut, mais on peut demander à encapsuler sur plusieurs lignes.
• Les éléments de la mise en page peuvent être réorganisés visuellement, dans l'ordre défini 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 leurs parents.
• L'espace peut être réparti autour des éléments et flexible les lignes dans une mise en page encapsulée, à l'aide des propriétés d'alignement de zone.
• 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. S'il s'agit de row, votre axe principal se trouve le long de la ligne, si elle est égale à column, votre 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 court dans l'autre sens par rapport à l'axe principal, Ainsi, si flex-direction est défini sur row, l'axe transversal court le long de la colonne.

Vous pouvez effectuer deux opérations 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 l'espace qui leur est attribué. Vous verrez comment tout cela fonctionne dans la 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 comment se comporte Flexbox en prenant un groupe d'objets de différentes tailles et en utilisant flexbox pour poser les supprimer.

<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 standard bloc 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 les éléments enfants Flex. Les éléments Flex commencent immédiatement à présenter un comportement spécifique à l'environnement flexible, à l'aide de leurs valeurs initiales.

Les valeurs initiales signifient que:

• Les éléments s'affichent sous forme de ligne.
• Ils ne sont pas encapsulés.
• 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 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 sous forme de ligne.
• Avec row-reverse:, les éléments sont disposés sur une ligne à partir de l'extrémité du conteneur flexible.
• 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 tester toutes les valeurs à l'aide des éléments de notre groupe de démonstration dans la démonstration ci-dessous.

Inverser le flux des éléments et l’accessibilité

Soyez prudent lorsque vous utilisez des propriétés qui réorganisent l'affichage visuel de l'ordre des choses 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, pas pour 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 ce qui peut modifier l'ordre des éléments dans Flexbox ou la grille peut être à l'origine de 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éorganisation du contenu
• Déconnexion de Flexbox et de la navigation au clavier

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 a une orientation de droite à gauche (rtl), les éléments seront alignés sur la droite. L'ordre de tabulation commencerait également à droite, car c'est ainsi que les phrases sont lues en arabe.

Si vous travaillez avec un mode d'écriture verticale, comme certaines polices de caractères japonaises, une ligne s'exécutera verticalement, de haut en bas. Dans cette démonstration, essayez de modifier flex-direction, qui utilise 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 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 parlions 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é main-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 s'il n'y a pas assez d'espace dans le conteneur, les éléments débordent.

</ph> <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 se produise.

Pour que les éléments soient encapsulés, ajoutez flex-wrap: wrap au conteneur flexible.

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

Lorsqu'un conteneur flexible l'encapsule, il crée plusieurs lignes flexibles. En termes de répartition de l'espace, chaque ligne agit comme un nouveau conteneur flexible. Ainsi, si vous encapsulez des lignes, il n'est pas possible d'aligner un élément de la ligne 2 avec un élément situé au-dessus de 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.

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 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, les éléments s'alignent au début et ne s'agrandissent pas pour occuper 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 la valeur de mot clé flex: initial. La propriété de raccourci flex, ou que les abréviations de flex-grow, flex-shrink et flex-basis sont appliquées aux enfants des un conteneur flexible.

Pour faire croître les articles, tout en permettant aux éléments volumineux d'avoir plus d'espace que les petits éléments, utilisez flex:auto. Vous pouvez essayer avec la démo 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: la taille des éléments peut être 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 changement de contenu flex:auto sur flex: 1 dans la démonstration.

Elle se décompose ainsi:

• 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: la taille de base des éléments est 0.

L'utilisation de flex: 1 indique que tous les éléments ont une taille nulle, et tout l'espace du conteneur flexible peut donc être distribué. Comme tous les éléments ont un facteur flex-grow de 1, ils se développent tous de la même manière et l'espace est partagé à parts égales.

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 élément flex-basis de auto, mais vous devrez spécifier les trois valeurs. La première valeur étant flex-grow, le deuxième flex-shrink, et le 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. Si vous voulez qu'un article croît un peu plus que ce que l'algorithme décide, quelle qu'en soit la utiles.

Réorganisation d'articles flexibles

Les éléments de votre conteneur flexible peuvent être réorganisés à 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.

Testez vos connaissances

Tester vos connaissances sur Flexbox

Présentation de l'alignement de Flexbox

Flexbox dispose d'un ensemble de propriétés permettant d'aligner les éléments et de répartir l'espace entre les éléments. Ces propriétés étaient tellement utiles qu'elles ont depuis été déplacées dans leur propre spécification, vous les rencontrerez également dans la mise en page sous forme de 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: répartition de l'espace sur l'axe principal.
• align-content: répartition spatiale sur l'axe transversal.
• place-content: raccourci pour 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-. 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 sur une ligne, il y a de l'espace sur l'axe principal. Les articles ne sont pas assez grands pour remplir complètement le conteneur flexible. Les articles 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 est à la fin.

Ajoutez la propriété justify-content au conteneur flexible. attribuez-lui la valeur flex-end, et les articles sont alignés à 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 à 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 flexible enveloppé, 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;
}

Faites un essai dans la démo. L'exemple contient des lignes d'éléments Flex encapsulées, et le conteneur possède un block-size, ce qui nous laisse de l'espace libre.

Le 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 ce paramètre, 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 est appliquée à 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 séparer 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 comme un groupe, ces propriétés ne sont pas implémentées dans un contexte flexible.

Il convient de savoir 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 dans laquelle elle est appliquée. Cela signifie qu'il pousse l'élément vers la droite, ce qui divise les groupes.

Comment 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, 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 mise en page flexible de la zone flexible CSS de MN comprend une série de guides détaillés avec des exemples.
• Guide d'astuces pour le Flexbox dans les CSS
• 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 ce boîtier flexible ?
• Cas d'utilisation de Flexbox
• Inspecter et déboguer les mises en page CSS Flexbox dans les outils pour les développeurs Chrome