From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../index.html" | 218 ------------ .../aligning_items_in_a_flex_container/index.html | 218 ++++++++++++ .../backwards_compatibility_of_flexbox/index.html | 369 +++++++++++++++++++++ .../basic_concepts_of_flexbox/index.html | 235 +++++++++++++ .../index.html" | 188 ----------- .../cas_utilisation_flexbox/index.html | 140 -------- .../concepts_de_base_flexbox/index.html | 235 ------------- .../index.html | 200 +++++++++++ .../index.html" | 200 ----------- .../index.html | 125 ------- .../mastering_wrapping_of_flex_items/index.html | 101 ++++++ .../index.html" | 101 ------ .../css/css_flexible_box_layout/mixins/index.html | 369 --------------------- .../ordering_flex_items/index.html | 139 ++++++++ .../index.html" | 139 -------- .../index.html | 125 +++++++ .../index.html" | 121 ------- .../typical_use_cases_of_flexbox/index.html | 140 ++++++++ 18 files changed, 1527 insertions(+), 1836 deletions(-) delete mode 100644 "files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html delete mode 100644 files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html (limited to 'files/fr/web/css/css_flexible_box_layout') diff --git "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" "b/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" deleted file mode 100644 index 2321587479..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Aligner des éléments dans un conteneur flexible -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible -tags: - - CSS - - Flex - - Guide - - Web - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container ---- -

{{CSSRef}}

- -

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

- -

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

- -

Un élément contenant une autre boîte centrée à l'intérieur

- -

 

- -

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Les propriétés responsables de l'alignement

- -

Voici les propriétés que nous étudierons dans ce guide :

- - - -

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

- -
-

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

-
- -

L'axe secondaire (cross axis)

- -

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

- -

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

- -

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

- -

Trois objets étirés pour mesurer 200 pixels de haut

- -

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

- -

Voici les valeurs disponibles pour aligner les objets :

- - - -

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

- -

Aligner un objet avec align-self

- -

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

- -

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

- -

Changer d'axe principal

- -

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

- -

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

- -

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

- -

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

- -

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

- -

Aligner le contenu sur l'axe secondaire : align-content

- -

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

- -

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

- -

La propriété align-content prend les valeurs suivantes :

- - - -

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

- -

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

- -

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

- -
-

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

-
- -

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

- -

Aligner le contenu sur l'axe principal

- -

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

- -

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

- -

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

- -

La propriété justify-content prend en charge les mêmes valeurs que align-content.

- - - -

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

- -

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

- -

L'alignement et les modes d'écriture

- -

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

- -

Trois éléments alignés sur la gauche

- -

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

- -

Trois éléments alignés sur la droite

- -

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

- -

L'alignement et la propriété flex-direction

- -

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

- -

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

- -

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

- -

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

- -

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

- -

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

- -

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

- -

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

- -

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

- -

Utiliser les marges automatiques pour aligner sur l'axe principal

- -

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

- -

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

- -

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

- -

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

- -

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

- -

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

- -

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

- -

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

- -

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..2321587479 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,218 @@ +--- +title: Aligner des éléments dans un conteneur flexible +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible +tags: + - CSS + - Flex + - Guide + - Web + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

+ +

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

+ +

Un élément contenant une autre boîte centrée à l'intérieur

+ +

 

+ +

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Les propriétés responsables de l'alignement

+ +

Voici les propriétés que nous étudierons dans ce guide :

+ + + +

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

+ +
+

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

+
+ +

L'axe secondaire (cross axis)

+ +

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

+ +

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

+ +

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

+ +

Trois objets étirés pour mesurer 200 pixels de haut

+ +

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

+ +

Voici les valeurs disponibles pour aligner les objets :

+ + + +

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Aligner un objet avec align-self

+ +

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

+ +

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Changer d'axe principal

+ +

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

+ +

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

+ +

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

+ +

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

+ +

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

Aligner le contenu sur l'axe secondaire : align-content

+ +

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

+ +

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

+ +

La propriété align-content prend les valeurs suivantes :

+ + + +

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

+ +

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

+
+ +

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

+ +

Aligner le contenu sur l'axe principal

+ +

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

+ +

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

+ +

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

+ +

La propriété justify-content prend en charge les mêmes valeurs que align-content.

+ + + +

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

L'alignement et les modes d'écriture

+ +

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

+ +

Trois éléments alignés sur la gauche

+ +

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

+ +

Trois éléments alignés sur la droite

+ +

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

L'alignement et la propriété flex-direction

+ +

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

+ +

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

+ +

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

+ +

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

+ +

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

+ +

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

+ +

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

+ +

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

+ +

Utiliser les marges automatiques pour aligner sur l'axe principal

+ +

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

+ +

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

+ +

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

+ +

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

+ +

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

+ +

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

+ +

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

+ +

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..652541e0c1 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,369 @@ +--- +title: Mises en page avancées avec les boîtes flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - Reference + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{CSSRef}}
+ +

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

+ +

Dans ces mixins, on utilisera :

+ + + +

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

+ +

Et les articles suivants ont été d'une aide précieuse :

+ + + +
+

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

+
+ +

Les conteneurs flexibles

+ +

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

+ + + +
+
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }
+
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

Direction des boîtes flexibles

+ +

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

+ + + +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

flex-wrap

+ +

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

+ + + +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

flex-flow

+ +

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

+ + + +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

order

+ +

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

+ + + +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

+ + + +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

+ + + +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

flex-basis

+ +

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

+ + + +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

flex

+ +

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

+ + + +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

+ +
+

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

+
+ + + +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

align-items

+ +

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

+ + + +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

align-self

+ + + +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

align-content

+ +

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

+ + + +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..dadea30a48 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,235 @@ +--- +title: Les concepts de base pour flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox +tags: + - Beginner + - CSS + - Débutant + - Guide + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

+ +

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

+ +

Les deux axes des boîtes flexibles

+ +

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

+ +

L'axe principal

+ +

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

+ + + +

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

L'axe secondaire (cross axis)

+ +

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

+ +

Les lignes de début et de fin

+ +

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

+ +

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

+ +

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

+ +

Working in English the start edge is on the left.

+ +

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

+ +

The start edge in a RTL language is on the right.

+ +

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

+ +

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

+ +

Le conteneur flexible

+ +

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

+ + + +

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

+ +

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

+ +

Modifier flex-direction

+ +

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

+ +

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

+ +

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

+ +

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

+ +

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

+ +

La propriété raccourcie flex-flow

+ +

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

+ +

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Les propriétés appliquées aux éléments flexibles

+ +

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

+ + + +

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

+ +

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

+ +

This flex container has available space after laying out the items.

+ +

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

+ +

La propriété flex-basis

+ +

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

+ +

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

+ +

La propriété flex-grow

+ +

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

+ +

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

+ +

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

+ +

La propriété flex-shrink

+ +

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

+ +

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

+ +
+

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

+
+ +

La propriété raccourcie flex et les valeurs synthétiques

+ +

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

+ +

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

+ + + +

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

+ +

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

+ +

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

+ +

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

+ +

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignement, justification et distribution de l'espace disponible entre les éléments

+ +

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

+ +

align-items

+ +

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

+ +

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

+ +

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

+ +

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

+ +

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

+ +

Prochaines étapes

+ +

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" "b/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" deleted file mode 100644 index f91090e0dc..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Utiliser les boîtes flexibles pour les applications web -slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -
{{CSSRef}}
- -

Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

- - - -

Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer au guide plus générique sur la manipulation des boîtes flexibles en CSS.

- -

Les bases

- -

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur flex puis définir {{cssxref("flex-flow")}} avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété wrap.

- -

Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :

- - - -

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

- -

Centrer un élément

- -

Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.

- -

CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-
- -

HTML

- -
<div class="vertical-box">
-  <div class="spacer"></div>
-  <div class="centered-element horizontal-box">
-    <div class="spacer"></div>
-    <div class="centered-element">Centered content</div>
-     <div class="spacer"></div>
-  </div>
-  <div class="spacer"></div>
-</div>
-
- -

Resultat

- -

{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}

- -

Répartir des conteneurs verticalement

- -

Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

- -

CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-
- -

HTML

- -
<div id="document" class="vertical-box">
-  <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div>
-  <div id="flexible-content" class="flexible-size"></div>
-  <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div>
-</div>
-
- -

JavaScript

- -
var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height > 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height < 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}
- -

Résultat

- -

{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}

- -

Créer un conteneur horizontal qui se replie

- -

Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur wrap sur la propriété {{cssxref("flex-flow")}}.

- -

CSS

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

HTML

- -
<div id="container" class="horizontal-container">
-  <div class="fixed-size">Élément 1</div>
-  <div class="fixed-size">Élément 2</div>
-  <div class="fixed-size">Élément 3</div>
-</div>
-<button id="increase-size">Augmenter la taille du conteneur</button>
-<button id="decrease-size">Réduire la taille du conteneur</button>
-
- -

JavaScript

- -
var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width > 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width < 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html deleted file mode 100644 index 26a4738980..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Cas d'utilisation classiques de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox -tags: - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

- -

Pourquoi choisir les boîtes flexibles ?

- -

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

- -

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

- -

La navigation

- -

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

- -

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

- -

L'espace distribué en dehors des éléments

- -

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

- -

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

L'espace distribué au sein des éléments

- -

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

- -

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

La navigation séparée

- -

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

- -

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

- -

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrer des éléments

- -

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

- -

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

- -

Une disposition en cartes avec un pied ajustable

- -

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

- -

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

- -

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Les objets média

- -

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

- -

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

- -

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

- -

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Inverser la position de l'objet média

- -

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Les contrôles de formulaire

- -

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

- -

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

- -

Conclusion

- -

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

- -

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html deleted file mode 100644 index dadea30a48..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Les concepts de base pour flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox -tags: - - Beginner - - CSS - - Débutant - - Guide - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

- -

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

- -

Les deux axes des boîtes flexibles

- -

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

- -

L'axe principal

- -

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

- - - -

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

L'axe secondaire (cross axis)

- -

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

- -

Les lignes de début et de fin

- -

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

- -

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

- -

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

- -

Working in English the start edge is on the left.

- -

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

- -

The start edge in a RTL language is on the right.

- -

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

- -

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

- -

Le conteneur flexible

- -

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

- - - -

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

- -

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

- -

Modifier flex-direction

- -

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

- -

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

- -

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

- -

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

- -

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

- -

La propriété raccourcie flex-flow

- -

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

- -

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Les propriétés appliquées aux éléments flexibles

- -

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

- - - -

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

- -

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

- -

This flex container has available space after laying out the items.

- -

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

- -

La propriété flex-basis

- -

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

- -

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

- -

La propriété flex-grow

- -

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

- -

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

- -

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

- -

La propriété flex-shrink

- -

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

- -

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

- -
-

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

-
- -

La propriété raccourcie flex et les valeurs synthétiques

- -

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

- -

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

- -

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

- - - -

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

- -

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

- -

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

- -

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

- -

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alignement, justification et distribution de l'espace disponible entre les éléments

- -

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

- -

align-items

- -

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

- -

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

- -

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

- -

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

- -

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

- -

Prochaines étapes

- -

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html new file mode 100644 index 0000000000..a05bdb1ca2 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -0,0 +1,200 @@ +--- +title: Contrôler les proportions des boîtes flexibles le long de l'axe principal +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal +tags: + - Boîtes flexibles + - CSS + - Flex + - Guide + - Intermediate + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

+ +

Un premier aperçu

+ +

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

+ + + +

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+
+ +

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

+ +

Les concepts majeurs relatifs à l'axe principal

+ +

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

+ +

Le dimensionnement des objets flexibles

+ +

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

+ +

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

+ +

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

+ +

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

+ +

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

+ +

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

+ +

Espace libre positif et négatif

+ +

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

+ +

Une image illustrant l'espace restant après que les éléments aient été affichés.

+ +

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

+ +

Les objets dépassent du conteneur.

+ +

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

+ +

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

+ +

La propriété flex-basis

+ +

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

+ +

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

+ +

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

+ +

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

+ +

La propriété flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

+ +

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

+ +

Combiner flex-grow et flex-basis

+ +

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

+ +

flex: 1 1 auto;

+ +

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

+ +

Une image illustrant l'espace libre positif avec une zone hachurée.

+ +

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

+ +

L'espace positif est réparti entre les éléments.

+ +

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

+ +

flex: 1 1 0;

+ +

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

+ +

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

Affecter différents coefficients flex-grow aux éléments

+ +

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

+ + + +

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

+ +

La propriété flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

+ +

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

+ +

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

+ +

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

+ +

Combiner flex-shrink et flex-basis

+ +

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

+ +

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

+ +
+

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

+
+ +

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

+ +

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

+ +

Utiliser différents coefficients flex-shrink pour différents éléments

+ +

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

+ +

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

Maîtriser le dimensionnement des objets flexibles

+ +

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

+ +

Quelle est la taille de base de l'objet ?

+ +
    +
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
  2. +
  3. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
  4. +
  5. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
  6. +
  7. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
  8. +
+ +

De l'espace est-il disponible ?

+ +

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

+ +
    +
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
  2. +
  3. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
  4. +
+ +

Les autres façons de distribuer l'espace

+ +

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

+ +

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" "b/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" deleted file mode 100644 index a05bdb1ca2..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Contrôler les proportions des boîtes flexibles le long de l'axe principal -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal -tags: - - Boîtes flexibles - - CSS - - Flex - - Guide - - Intermediate - - flexbox -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

- -

Un premier aperçu

- -

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

- - - -

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

- -
.item {
-  flex: 2 1 auto;
-}
-
- -

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

- -

Les concepts majeurs relatifs à l'axe principal

- -

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

- -

Le dimensionnement des objets flexibles

- -

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

- -

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

- -

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

- -

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

- -

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

- -

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

- -

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

- -

Espace libre positif et négatif

- -

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

- -

Une image illustrant l'espace restant après que les éléments aient été affichés.

- -

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

- -

Les objets dépassent du conteneur.

- -

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

- -

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

- -

La propriété flex-basis

- -

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

- -

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

- -

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

- -

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

- -

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

- -

La propriété flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

- -

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

- -

Combiner flex-grow et flex-basis

- -

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

- -

flex: 1 1 auto;

- -

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

- -

Une image illustrant l'espace libre positif avec une zone hachurée.

- -

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

- -

L'espace positif est réparti entre les éléments.

- -

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

- -

flex: 1 1 0;

- -

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

- -

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

- -

Affecter différents coefficients flex-grow aux éléments

- -

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

- - - -

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

- -

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

- -

La propriété flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

- -

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

- -

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

- -

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

- -

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

- -

Combiner flex-shrink et flex-basis

- -

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

- -

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

- -
-

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

-
- -

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

- -

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

- -

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

- -

Utiliser différents coefficients flex-shrink pour différents éléments

- -

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

- -

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

- -

Maîtriser le dimensionnement des objets flexibles

- -

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

- -

Quelle est la taille de base de l'objet ?

- -
    -
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
  2. -
  3. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
  4. -
  5. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
  6. -
  7. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
  8. -
- -

De l'espace est-il disponible ?

- -

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

- -
    -
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
  2. -
  3. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
  4. -
- -

Les autres façons de distribuer l'espace

- -

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

- -

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html deleted file mode 100644 index c6e9691ae5..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Les liens entre flexbox et les autres méthodes de disposition -slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions -tags: - - CSS - - Guide - - display - - flexbox - - grid -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods ---- -
{{CSSRef}}
- -

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

- -
-

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

-
- -

Le module d'alignement des boîtes (Box Alignment)

- -

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

- -

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

- -

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

- -
-

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

-
- -

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

- -

Les propriétés d'espacement (gap)

- -

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

- -

Les modes d'écritures (Writing Modes)

- -

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

- -

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

- -

Les différents modes d'écritures

- -

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

- -

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

- -

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

- -

Les boîtes flexibles et les autres méthodes de disposition

- -

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

- -

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

- -

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

- -

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

- -

Les boîtes flexibles et la disposition en grille

- -

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

- -

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

- -

Flexbox / grille : quelle différence ?

- -

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

- -

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

- -

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

- -

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

- -

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

- -

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

- -

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

- -

Les boîtes flexibles et display: contents

- -

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

- -
-

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

-
- -

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

- -

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

- -

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

- -

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

- -
-

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

-
- -

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

- -

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..6b78cba48f --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,101 @@ +--- +title: Maîtriser le passage à la ligne des éléments flexibles +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles +tags: + - CSS + - Grille + - Guide + - Intermediate + - flexbox + - grid + - wrapping +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

+ +

Créer des passages à la ligne

+ +

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

+ +

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

Le retour à la ligne et flex-direction

+ +

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

+ +

Des explications sur cette disposition unidimensionnelle

+ +

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

+ +

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

+ +

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

+ +

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

+ +

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

+ +

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

+ +

Créer des gouttières entre les éléments

+ +

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

+ +

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

+ +

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

L'impact de visibility: collapse

+ +

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

+ +
+

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

+
+ +

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

+ +

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

+ +
+

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

+ +

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

+ +

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

+ +

La différence entre visibility: collapse et display: none

+ +

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index 6b78cba48f..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Maîtriser le passage à la ligne des éléments flexibles -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles -tags: - - CSS - - Grille - - Guide - - Intermediate - - flexbox - - grid - - wrapping -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items ---- -

{{CSSRef}}

- -

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

- -

Créer des passages à la ligne

- -

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

- -

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

- -

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

- -

Le retour à la ligne et flex-direction

- -

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

- -

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

- -

Des explications sur cette disposition unidimensionnelle

- -

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

- -

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

- -

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

- -

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

- -

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

- -

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

- -

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

- -

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

- -

Créer des gouttières entre les éléments

- -

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

- -

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

- -

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

- -

L'impact de visibility: collapse

- -

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

- -
-

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

-
- -

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

- -

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

- -
-

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

- -

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

- -

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

- -

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

- -

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

- -

La différence entre visibility: collapse et display: none

- -

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 652541e0c1..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Mises en page avancées avec les boîtes flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - Reference - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -
{{CSSRef}}
- -

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

- -

Dans ces mixins, on utilisera :

- - - -

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

- -

Et les articles suivants ont été d'une aide précieuse :

- - - -
-

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

-
- -

Les conteneurs flexibles

- -

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

- - - -
-
@mixin flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// Exemple d'utilisation
-%flexbox { @include flexbox; }
-
- -
-
@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -moz-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
- -

Direction des boîtes flexibles

- -

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

- - - -
-
@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: reverse;
-    -moz-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: normal;
-    -moz-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: reverse;
-    -moz-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -moz-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// Version plus courte :
-@mixin flex-dir($args...) { @include flex-direction($args...); }
-
- -

flex-wrap

- -

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

- - - -
-
@mixin flex-wrap($value: nowrap) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
- -

flex-flow

- -

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

- - - -
-
@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
- -

order

- -

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

- - - -
-
@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -moz-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}
-
- -

flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

- - - -
-
@mixin flex-grow($int: 1) {
-  -webkit-box-flex: $int;
-  -moz-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -ms-flex: $int;
-  flex-grow: $int;
-}
-
- -

flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

- - - -
-
@mixin flex-shrink($int: 0) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex: $int;
-  flex-shrink: $int;
-}
-
- -

flex-basis

- -

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

- - - -
-
@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  flex-basis: $value;
-}
-
- -

flex

- -

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

- - - -
-
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
-
-  // Définir une variable pour l'utiliser
-  // avec les propriétés box-flex
-  $fg-boxflex: $fg;
-
-  // Box-Flex ne prend qu'une valeur, on prend donc
-  // la première valeur de la liste et on la renvoie.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box: $fg-boxflex;
-  -moz-box: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}
-
- -

justify-content

- -

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

- -
-

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

-
- - - -
-
@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -moz-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -moz-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  justify-content: $value;
-}
-  // Version plus courte :
-  @mixin flex-just($args...) { @include justify-content($args...); }
-
- -

align-items

- -

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

- - - -
-
@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -moz-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -moz-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -moz-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  align-items: $value;
-}
-
- -

align-self

- - - -
-
@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
- -

align-content

- -

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

- - - -
-
@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..acd32e0de0 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,139 @@ +--- +title: Ordonner les éléments flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles +tags: + - Accessibilité + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - a11y + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

+ +

Inverser l'affichage des éléments

+ +

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

+ + + +

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

+ +

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

+ +

Les objets sont affichés sur une colonne qui commence en haut.

+ +

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

+ +

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

+ +

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

+ +

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

+ +

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

+ +

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

+ +
+

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

+
+ +

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

+ +

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

+ +
+

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.

+
+ +
+

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

+
+ +

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

+ +

La propriété order

+ +

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

+ +

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

+ +

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

+ + + +

Les éléments seront affichés sur la page dans l'ordre suivant :

+ + + +

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

+ +

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

+ +

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

+ +

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

+ +

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

+ +

La propriété order et l'accessibilité

+ +

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

+ +

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

+ + + +

Cas d'utilisation pour order

+ +

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

+ +

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

+ +

Un composant avec une date, un titre puis un contenu.

+ +

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

+ +

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index acd32e0de0..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Ordonner les éléments flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles -tags: - - Accessibilité - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - a11y - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items ---- -

{{CSSRef}}

- -

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

- -

Inverser l'affichage des éléments

- -

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

- - - -

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

- -

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

- -

Les objets sont affichés sur une colonne qui commence en haut.

- -

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

- -

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

- -

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

- -

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

- -

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

- -

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

- -
-

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

-
- -

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

- -

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

- -
-

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.

-
- -
-

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

-
- -

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

- -

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

- -

La propriété order

- -

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

- -

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

- -

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

- - - -

Les éléments seront affichés sur la page dans l'ordre suivant :

- - - -

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

- -

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

- -

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

- -

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

- -

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

- -

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

- -

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

- -

La propriété order et l'accessibilité

- -

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

- -

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

- - - -

Cas d'utilisation pour order

- -

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

- -

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

- -

Un composant avec une date, un titre puis un contenu.

- -

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

- -

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..c6e9691ae5 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,125 @@ +--- +title: Les liens entre flexbox et les autres méthodes de disposition +slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions +tags: + - CSS + - Guide + - display + - flexbox + - grid +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

+ +
+

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

+
+ +

Le module d'alignement des boîtes (Box Alignment)

+ +

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

+ +

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

+ +

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

+ +
+

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

+
+ +

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

+ +

Les propriétés d'espacement (gap)

+ +

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

+ +

Les modes d'écritures (Writing Modes)

+ +

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

+ +

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

+ +

Les différents modes d'écritures

+ +

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

+ +

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

+ +

Les boîtes flexibles et les autres méthodes de disposition

+ +

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

+ +

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

+ +

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

+ +

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Les boîtes flexibles et la disposition en grille

+ +

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

+ +

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

+ +

Flexbox / grille : quelle différence ?

+ +

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

+ +

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

+ +

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

+ +

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

+ +

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

+ +

Les boîtes flexibles et display: contents

+ +

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

+ +
+

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

+
+ +

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

+ +

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

+ +

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

+ +

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

+ +
+

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

+
+ +

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" "b/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" deleted file mode 100644 index b36e1eb0f4..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Rétrocompatibilité de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox -tags: - - '@supports' - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -
{{CSSRef}}
- -

Les boîtes flexibles (flexbox) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.

- -

Il était une fois flexbox

- -

Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de Candidate Recommendation dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.

- -

Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.

- -

En 2009, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser display: box et on disposait ensuite de différentes propriétés box-* qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.

- -

Vint ensuite une mise à jour de la spécification pour mettre à jour la syntaxe : display: flexbox — là encore, ces valeurs étaient préfixées.

- -

Enfin, la spécification a été mise à jour pour définir display: flex comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.

- -

Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que display: box ou display: flexbox, vous pouvez en déduire qu'il s'agit d'informations obsolètes.

- -

État de la compatibilité des navigateurs

- -

La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :

- - - -

On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec display: flex mais que de nombreux bugs sont présents dans cette implémentation.

- -

Problèmes fréquents

- -

La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site Flexbugs représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.

- -

Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.

- -
.wrapper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Autoprefixer Online est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter Can I Use ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.

- -

Techniques de recours

- -

La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.

- -

Éléments flottants

- -
-

float et clear ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - 3. Conteneurs flexibles

-
- -

Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite display: flex sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.

- -

Pour tester le comportement alternatif, vous pouvez retirer display: flex du conteneur englobant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

- -

display: inline-block

- -

Lorsqu'un élément disposé avec inline-block devient un élément flexible, cet élément devient analogue à un bloc et le comportement de display: inline-block qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.

- -

Vous pouvez retirer la règle avec display: flex dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

- -

display: table-

- -

Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.

- -

Si vous utilisez display: table-cell sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.

- -

Si vous déclarez ensuite display: flex sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.

- -
-

“Note : certaines valeurs de display déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec display: table-cell deviendront deux éléments flexibles distincts avec display: block plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - 4. Éléments flexibles

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

- -

La propriété vertical-align

- -

L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode display: inline-block. Les deux modes display: table-cell et display: inline-block permettent d'utiliser cette propriété. La propriété vertical-align permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec display: table-cell ou display: inline-block comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

- -

Requêtes de fonctionnalités et flexbox

- -

Il est possible d'utiliser les requêtes de fonctionnalité (feature queries) afin de détecter la prise en charge des boîtes flexibles :

- -
@supports (display: flex) {
-  // code utilisé pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code flexbox qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :

- -
@supports (display: flex) or (display: -webkit-box) {
-  // code pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire Using Feature Queries in CSS (en anglais) sur le blog Hacks de Mozilla.

- -

Conclusion

- -

Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.

diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..26a4738980 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,140 @@ +--- +title: Cas d'utilisation classiques de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox +tags: + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

+ +

Pourquoi choisir les boîtes flexibles ?

+ +

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

+ +

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

+ +

La navigation

+ +

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

+ +

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

+ +

L'espace distribué en dehors des éléments

+ +

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

+ +

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

L'espace distribué au sein des éléments

+ +

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

+ +

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

La navigation séparée

+ +

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

+ +

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

+ +

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrer des éléments

+ +

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

+ +

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

+ +

Une disposition en cartes avec un pied ajustable

+ +

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

+ +

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

+ +

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Les objets média

+ +

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

+ +

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

+ +

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

+ +

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Inverser la position de l'objet média

+ +

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Les contrôles de formulaire

+ +

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

+ +

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

+ +

Conclusion

+ +

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

+ +

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

-- cgit v1.2.3-54-g00ecf