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" | 77 ------------- .../index.html" | 51 --------- .../index.html" | 119 --------------------- .../index.html" | 119 --------------------- .../index.html | 77 +++++++++++++ .../box_alignment_in_flexbox/index.html | 119 +++++++++++++++++++++ .../box_alignment_in_grid_layout/index.html | 119 +++++++++++++++++++++ .../index.html | 51 +++++++++ 8 files changed, 366 insertions(+), 366 deletions(-) delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html (limited to 'files/fr/web/css/css_box_alignment') diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" deleted file mode 100644 index 45945b3040..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -
-

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

- -

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

- -

justify-self

- -

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

- -

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

align-self

- -

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

Utilisation actuelle de l'alignement pour ces dispositions

- -

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

- -

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

- -
.container {
-  width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

- -

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

- -

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

- -

Référence

- -

Propriétés CSS

- - - -

Termes du glossaire

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" deleted file mode 100644 index 36bee5640e..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: L'alignement des boîtes avec une disposition en colonnes -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

- -
-

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

- -

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

- -

column-gap

- -

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

- -

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

- -

Référence

- -

Propriétés CSS

- -
- -
- -

Termes du glossaire

- -
- -
diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" deleted file mode 100644 index 8acebc248d..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec Flexbox -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox -tags: - - CSS - - Guide - - flexbox -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

Liens entre les axes et flex-direction

- -

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

- -

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

- - - -

Alignement sur l'axe principal

- - - -

Alignement sur l'axe secondaire

- - - -

Absence de justify-self pour Flexbox

- -

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

- -

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

- -

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

- -

Alignement et marges automatiques

- -

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

- -

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

- -

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

- -

Les propriétés gap

- - - -

Créer des gouttières fixes entre chaque objet

- -

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

- -

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

- -
-

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

-
- -

Référence

- -

Propriétés CSS

- -
- -
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" deleted file mode 100644 index 4adf375ac4..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec une grille CSS -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille -tags: - - CSS - - CSS Grid - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

Axes de la grille

- -

La grille est une méthode de disposition sur deux dimensions.

- -

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

- -

- -

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

- -

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

- -

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

- -

- -

Alignement individuel

- - - -

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

- -

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

- -

Alignement du contenu

- - - -

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

- -

Gouttières et versions préfixées des propriétés

- - - -

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

- -

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

- -

Référence

- -

Propriétés CSS

- -
- -
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html new file mode 100644 index 0000000000..45945b3040 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -0,0 +1,77 @@ +--- +title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +
+

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

+ +

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

+ +

justify-self

+ +

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

+ +

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

align-self

+ +

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

Utilisation actuelle de l'alignement pour ces dispositions

+ +

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

+ +

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

+ +

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

+ +

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

+ +

Référence

+ +

Propriétés CSS

+ + + +

Termes du glossaire

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..8acebc248d --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec Flexbox +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox +tags: + - CSS + - Guide + - flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Liens entre les axes et flex-direction

+ +

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

+ +

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

+ + + +

Alignement sur l'axe principal

+ + + +

Alignement sur l'axe secondaire

+ + + +

Absence de justify-self pour Flexbox

+ +

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

+ +

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

+ +

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

+ +

Alignement et marges automatiques

+ +

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

+ +

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

+ +

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

+ +

Les propriétés gap

+ + + +

Créer des gouttières fixes entre chaque objet

+ +

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

+ +

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

+ +
+

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

+
+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html new file mode 100644 index 0000000000..4adf375ac4 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec une grille CSS +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille +tags: + - CSS + - CSS Grid + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Axes de la grille

+ +

La grille est une méthode de disposition sur deux dimensions.

+ +

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

+ +

+ +

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

+ +

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

+ +

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

+ +

+ +

Alignement individuel

+ + + +

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

+ +

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

+ +

Alignement du contenu

+ + + +

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

+ +

Gouttières et versions préfixées des propriétés

+ + + +

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

+ +

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html new file mode 100644 index 0000000000..36bee5640e --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -0,0 +1,51 @@ +--- +title: L'alignement des boîtes avec une disposition en colonnes +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

+ +
+

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

+ +

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

+ +

column-gap

+ +

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

+ +

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Termes du glossaire

+ +
+ +
-- cgit v1.2.3-54-g00ecf