From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- files/fr/learn/css/css_layout/flexbox/index.html | 54 ++++++++++++------------ 1 file changed, 27 insertions(+), 27 deletions(-) (limited to 'files/fr/learn/css/css_layout/flexbox') diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html index a151a1da09..17a2d6e00f 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
-

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

+

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

- +
- + @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Pourquoi Flexbox ?

-

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

+

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

@@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

-

Voici un exemple simple

+

Voici un exemple simple

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

-

Échantillon d'utilisation de flexbox

+

Échantillon d'utilisation de flexbox

Détermination des éléments à disposer en boîtes flexibles

@@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Voici le résultat :

-

Échantillon d'utilisation de flexbox

+

Échantillon d'utilisation de flexbox

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

-

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

+

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

-

Aparté sur le modèle flex

+

Aparté sur le modèle flex

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

-

Terminologie pour les boîtes modulables

+

Terminologie pour les boîtes modulables

Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :