diff options
Diffstat (limited to 'files/fr/web/css/css_flow_layout')
6 files changed, 487 insertions, 0 deletions
diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html new file mode 100644 index 0000000000..663f0a9c8a --- /dev/null +++ b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html @@ -0,0 +1,68 @@ +--- +title: Être ou ne pas être dans le flux +slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary">Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p> + +<p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p> + +<p>Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.</p> + +<h2 id="Retirer_un_élément_du_flux">Retirer un élément du flux</h2> + +<p>Tous les éléments d'un document sont dans le flux à l'exception :</p> + +<ul> + <li>des éléments flottants</li> + <li>des éléments avec <code>position: absolute</code> ou avec <code>position: fixed</code></li> + <li>de l'élément racine (<code>html</code>)</li> +</ul> + +<p>Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.</p> + +<h3 id="Les_éléments_flottants">Les éléments flottants</h3> + +<p>Dans cet exemple, on a un élément <code>div</code> puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément <code>div</code>. L'élément <code>div</code> est désormais en dehors du flux.</p> + +<p>Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p> + +<p>On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.</p> + +<h3 id="Le_positionnement_absolu">Le positionnement absolu</h3> + +<p>En utilisant <code>position: absolute</code> ou <code>position: fixed</code> sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec <code>position</code> <code>absolute</code> et décalé avec les valeurs <code>top: 30px</code> et <code>right: 30px</code>. Cet élément est retiré du flux du document.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p> + +<p>Utiliser <code>position: fixed</code> retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (<em>viewport</em>) plutôt que par rapport au bloc englobant.</p> + +<p>Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.</p> + +<h3 id="Le_positionnement_relatif_et_le_flux">Le positionnement relatif et le flux</h3> + +<p>Si on fournit un positionnement relatif en appliquant <code>position: relative</code> à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p> + +<p>Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant <code>position: absolute</code> n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications relatives aux contextes de formatage</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">En apprendre plus sur le positionnement</a></li> +</ul> diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html new file mode 100644 index 0000000000..8566b8accd --- /dev/null +++ b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html @@ -0,0 +1,128 @@ +--- +title: Disposition de bloc et en ligne avec le flux normal +slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary">Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p> + +<p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p> + +<p>Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :</p> + +<blockquote> +<p>« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.<br> + <br> + Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1</p> +</blockquote> + +<p>Quant aux éléments du contexte de formatage en ligne :</p> + +<blockquote> +<p>« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (<em>padding</em>) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2</p> +</blockquote> + +<p>On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.</p> + +<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_de_bloc">Les éléments qui participent à un contexte de formatage de bloc</h2> + +<p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p> + +<p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p> + +<p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p> + +<p>Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p> + +<p>Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p> + +<p>Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p> + +<h3 id="La_fusion_des_marges">La fusion des marges</h3> + +<p>La spécification indique que les marges verticales entre chaque éléments de bloc <em>fusionnent</em>. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.</p> + +<p>Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de <code>40px</code> car la plus petite est « fusionnée » avec la plus grande.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p> + +<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article dédié à la fusion des marges</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p> +</div> + +<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2> + +<p>Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).</p> + +<p>Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p> + +<p>Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes <em>anonymes</em>. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.</p> + +<p>La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p> + +<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">le guide sur le modèle de formatage visuel</a>.</p> + +<h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2> + +<p>En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété <code>display</code> définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification <em>CSS Display Model Level 3</em>, on en apprend plus sur la façon dont la propriété <code>display</code> modifie comportement des boîtes et des boîtes qu'elles génèrent.</p> + +<p>Le type d'affichage d'un élément définit deux choses :</p> + +<ul> + <li>le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage</li> + <li>le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter</li> +</ul> + +<p>Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué <code>display: flex</code>. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut <code>block</code>.</p> + +<p>Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a <code>display: flex</code>. Aussi, le type d'affichage intérieur vaut <code>flex</code> et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p> + +<p>On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est <code>flow</code> et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.</p> + +<p>Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (<code>display: flex</code>) ou les grilles CSS (<code>display: grid</code>) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est <code>block</code>.</p> + +<h3 id="Modifier_le_contexte_de_formatage_auquel_un_élément_participe">Modifier le contexte de formatage auquel un élément participe</h3> + +<p>Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.</p> + +<p>Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle <code>display: block</code> en ciblant les éléments <code><strong></code>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li> + <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li> + <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments HTML en ligne</a></li> + <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments HTML de bloc</a></li> +</ul> diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html new file mode 100644 index 0000000000..703af33bee --- /dev/null +++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html @@ -0,0 +1,70 @@ +--- +title: La disposition en flux et le dépassement +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> + +<p class="summary">Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p> + +<h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2> + +<p>Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p> + +<p>Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété <code><a href="/fr/docs/Web/CSS/overflow">overflow</a></code>. La valeur initiale de cette propriété est <code>visible</code> et c'est pour cela qu'on voit le contenu dépasser.</p> + +<h2 id="Contrôler_le_dépassement">Contrôler le dépassement</h2> + +<p>La propriété <code>overflow</code> possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur <code>hidden</code>. Avec cette valeur, une partie du contenu peut ne pas être visible.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p> + +<p>Avec la valeur <code>scroll</code>, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p> + +<p>Avec la valeur <code>auto</code>, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que <code>overflow: scroll</code> ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur <code>auto</code>, seules les barres de défilement nécessaires sont ajoutées.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p> + +<p>Comme nous l'avons vu plus tôt, toute valeur qui est différente de <code>visible</code> créera un nouveau contexte de formatage de bloc.</p> + +<div class="note"> +<p><strong>Note :</strong> Dans <a href="https://www.w3.org/TR/css-overflow-3/">le brouillon du module de spécification <em>Overflow</em> de niveau 3</a>, une valeur est ajoutée : <code>overflow: clip</code>. Cette valeur agira comme <code>overflow: hidden</code> mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.</p> +</div> + +<p>Pour être tout à fait précis, la propriété <code>overflow</code> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> pour les propriétés <code><a href="/fr/docs/Web/CSS/overflow-x">overflow-x</a></code> et <code><a href="/fr/docs/Web/CSS/overflow-y">overflow-y</a></code>. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour <code>overflow-x</code> et la seconde pour <code>overflow-y</code>. Dans l'exemple qui suit, seule <code>overflow-y: scroll</code> est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p> + +<h2 id="Les_propriétés_relatives">Les propriétés relatives</h2> + +<p>Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">les modes d'écriture et la disposition en flux</a>, nous avons étudié des propriétés plus récentes <code>block-size</code> et <code>inline-size</code> qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : <code><a href="/fr/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> et <code><a href="/fr/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. Ces propriétés « logiques » correspondent aux propriétés « physiques » <code>overflow-x</code> et <code>overflow-y</code> où la correspondance varie en fonction du mode d'écriture du document.</p> + +<p>À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.</p> + +<h2 id="Gérer_le_dépassement">Gérer le dépassement</h2> + +<p>Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.</p> + +<h3 id="Dépassement_sur_l'axe_en_ligne">Dépassement sur l'axe en ligne</h3> + +<p>La propriété <code><a href="/fr/docs/Web/CSS/text-overflow">text-overflow</a></code> indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur <code>clip</code> qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur <code>ellipsis</code> permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p> + +<h3 id="Dépassement_sur_l'axe_de_bloc">Dépassement sur l'axe de bloc</h3> + +<p>Il existe également une proposition pour une propriété <code>block-overflow</code>. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.</p> + +<p>Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.</p> diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html new file mode 100644 index 0000000000..2ecf299ce2 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html @@ -0,0 +1,90 @@ +--- +title: Disposition de flux et modes d'écriture +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +tags: + - CSS + - Guide + - Mode d'écriture +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +<p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> + +<p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p> + +<h2 id="La_spécification_des_modes_d'écriture">La spécification des modes d'écriture</h2> + +<p>Le module de spécification <em>CSS Writing Modes</em> de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">de la spécification </a>quant aux modes d'écriture :</p> + +<blockquote> +<p>« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (<em>inline</em>) et selon sa direction de bloc. »</p> +</blockquote> + +<p>La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.</p> + +<p>La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété <code>writing-mode</code> contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction <code>vertical-lr</code>, on pourra utiliser <code>writing-mode: vertical-lr</code> sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.</p> + +<p>Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p> + +<h2 id="La_propriété_writing-mode_et_le_flux_de_bloc">La propriété <code>writing-mode</code> et le flux de bloc</h2> + +<p>La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs <code>horizontal-tb</code>, <code>vertical-rl</code> et <code>vertical-lr</code>. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est <code>horizontal-tb</code> ce qui signifie que l'axe de bloc est dirigé de haut en bas (<code>tb</code> pour <em>top to bottom</em> qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes <code>horizontal-tb</code>.</p> + +<p>Voici un exemple avec <code>horizontal-tb</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p> + +<p>La valeur <code>vertical-rl</code> permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p> + +<p>Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour <code>writing-mode</code> : <code>vertical-lr</code>. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p> + +<h2 id="Les_boîtes_utilisant_un_mode_d'écriture_différent_de_leur_parent">Les boîtes utilisant un mode d'écriture différent de leur parent</h2> + +<p>Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait <code>display: inline-block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p> + +<p>Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut <code>flow</code>, le type d'affichage calculé sera <code>flow-root</code>. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec <code>horizontal-tb</code> contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p> + +<h2 id="Les_éléments_remplacés">Les éléments remplacés</h2> + +<p>Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété <code>writing-mode</code>. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p> + +<h2 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h2> + +<p>Lorsqu'on travaille avec des modes d'écriture autres que <code>horizontal-tb</code>, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec <code>horizontal-tb</code> cette largeur sera selon la direction en ligne. Mais avec le mode <code>vertical-lr</code> cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p> + +<p>C'est pour cela que des propriétés <em>logiques</em> ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit <code>inline-size: 100px</code> sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, <code>inline-size</code> correspondra à la direction en ligne quoi qu'il arrive.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p> + +<p>Le module de spécification <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS sur les propriétés et valeurs logiques</a> contient des versions logiques des propriétés contrôlant les marges, le remplissage (<em>padding</em>) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions <em>physiques</em>.</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p> + +<h2 id="Voir_aussi_2"><a id="Voir_aussi" name="Voir_aussi">Voir aussi</a></h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li> +</ul> + +<h2 id="Ressources_externes_2"><a id="Ressources_externes" name="Ressources_externes">Ressources externes</a></h2> + +<ul> + <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li> +</ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html new file mode 100644 index 0000000000..88ed84ff16 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html @@ -0,0 +1,89 @@ +--- +title: Explications quant aux contextes de formatage +slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +<div>{{CSSRef}}</div> + +<p class="summary">Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p> + +<p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p> + +<h2 id="Le_contexte_de_formatage_de_bloc">Le contexte de formatage de bloc</h2> + +<p>L'élément <code>html</code> définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <code><html></html></code> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (<em>Block formatting context</em> ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (<em>padding</em>) d'un élément interagissent avec les autres blocs du même contexte.</p> + +<h3 id="Créer_un_nouveau_contexte_de_formatage_de_bloc">Créer un nouveau contexte de formatage de bloc</h3> + +<p>L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionneront</a> que pour des éléments d'un même contexte formatage.</p> + +<p>Au delà de l'élément racine du document (ici l'élément <code>html</code>), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :</p> + +<ul> + <li>Pour les éléments flottants ({{cssxref("float")}})</li> + <li>Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})</li> + <li>Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}</li> + <li>Pour les cellules de tableau ou pour les éléments avec <code>display: table-cell</code>, y compris pour les cellules de tableau anonymes créées avec les propriétés <code>display: table-*</code></li> + <li>Les légendes de tableau ou les éléments avec <code>display: table-caption</code></li> + <li>Les éléments de blocs pour lesquels <code>overflow</code> a une valeur différente de <code>visible</code></li> + <li><code>display: flow-root</code></li> + <li>Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code> ou <code>strict</code></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Les élément flexibles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les éléments de grille</a></li> + <li><a href="fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Les conteneurs multi-colonnes</a></li> + <li>Les éléments avec {{cssxref("column-span")}}:<code>all</code></li> +</ul> + +<p>Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.</p> + +<p>Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <code><div></code> où une bordure est appliquée. Le contenu de cet élément <code>div</code> flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du <code>div</code> passe sur le contenu flottant. Comme expliqué dans <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">le guide sur les éléments appartenant ou non au flux</a>, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du <code>div</code> ne contienne que le contenu et pas l'élément flottant.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p> + +<p>En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer <code>overflow: auto</code> ou à utiliser d'autres valeurs que <code>overflow: visible</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p> + +<p>En utilisant <code>overflow: auto</code>, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément <code>div</code> devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.</p> + +<p>Toutefois, utiliser <code>overflow</code> pour créer un nouveau contexte de formatage peut poser problème car la propriété <code>overflow</code> est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.</p> + +<h3 id="Créer_un_contexte_de_formatage_de_bloc_explicite_utiliser_display_flow-root">Créer un contexte de formatage de bloc explicite : utiliser <code>display: flow-root</code></h3> + +<p>Une valeur plus récente de <code>display</code> permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant <code>display: flow-root</code> sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p> + +<p>Ainsi, en utilisant <code>display: flow-root;</code> sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.</p> + +<p>Le nom de cette valeur, <code>flow-root</code>, prend son sens lorsqu'on voit que l'élément agit comme une racine (<code>root</code>) pour le nouveau contexte qui est créé.</p> + +<h2 id="Un_contexte_de_formatage_en_ligne">Un contexte de formatage en ligne</h2> + +<p>Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.</p> + +<p>Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (<em>padding</em>), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p> + +<h2 id="Les_autres_contexte_de_formatage">Les autres contexte de formatage</h2> + +<p>Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">les interactions entre le flux normal et les différents modes d'écriture</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de formatage visuel</a></li> + <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîte CSS</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..236f7b9341 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS + - CSS Flow Layout + - Reference +translation_of: Web/CSS/CSS_Flow_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p> + +<p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p> + +<p>Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.</p> + +<h2 id="Exemple_simple">Exemple simple</h2> + +<p>Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.</p> + +<p>La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.</p> + +<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> + +<h2 id="Guides">Guides</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans le flux normal</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement">La disposition en flux et les dépassements</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">La disposition en flux et les modes d'écriture</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors">Être ou non dans le flux</a></li> +</ul> + +<h2 id="Référence">Référence</h2> + +<h3 id="Termes_du_glossaire">Termes du glossaire</h3> + +<ul> + <li><a href="/fr/docs/Glossary/Block/Block_(CSS)">Bloc (CSS)</a></li> +</ul> |