Guides CSS

Disposition normale, en bloc et en ligne

Si vous n'utilisez pas de mise en page flexible ou en grille, votre contenu est alors mis en page selon une disposition normale, ou une mise en page en blocs et en ligne. Ces guides vous aideront à comprendre le fonctionnement de cette méthode de mise en page.

Disposition de bloc et en ligne avec le flux normal

Une introduction à la disposition normale.

Être ou ne pas être dans le flux

Comment retirer un élément de la disposition et quel impact cela a sur la mise en page de votre document.

Explications quant aux contextes de formatage

Introduction à la création d'un nouveau contexte de formatage.

Disposition de flux et modes d'écriture

Comment fonctionne la disposition si vous utilisez un mode d'écriture différent, tel que le texte vertical.

La disposition en flux et le dépassement

Comprendre et gérer le débordement.

Introduction au modèle de boîte CSS

Comprendre le modèle de boîte est un élément fondamental du CSS ; ce guide explique son fonctionnement.

Fusion des marges

Découvrez pourquoi vous obtenez parfois une marge inférieure à celle attendue, en raison de l'effondrement des marges dans le flux normal.

Comprendre z-index en CSS

Le positionnement absolu, la flexbox et la grille permettent tous de manipuler la pile (position relative des éléments sur l'axe z) via la propriété z-index. Cet article explique comment la gérer.

Disposition multi-colonnes

La mise en page multi-colonnes, souvent appelée « multi-colonnes », prend le contenu dans son flux normal et le divise en colonnes. Découvrez comment utiliser cette méthode de mise en page dans les guides suivants.

Concepts de base pour la disposition multi-colonnes

Présentation des fonctionnalités de base de multi-colonnes.

Mettre en forme les colonnes

Les possibilités de stylisation des colonnes sont limitées ; ce guide explique ce que vous pouvez faire.

Répartir et équilibrer le contenu entre les colonnes

Étendre des éléments sur plusieurs colonnes et équilibrer le contenu des colonnes.

Gestion du dépassement en multi-colonnes

Que se passe-t-il lorsque le contenu dépasse l'espace disponible dans les colonnes ?

Gérer la rupture du contenu entre les colonnes

Gérer les coupures de contenu lorsque celui-ci est divisé en colonnes.

Boîtes flexibles

La disposition flexible en CSS, communément appelée « flexbox », est un modèle de disposition optimisé pour la conception d'interfaces utilisateur et la disposition d'éléments dans une dimension. Dans le modèle de disposition flexible, les enfants d'un conteneur flexible peuvent être disposés dans n'importe quelle direction et peuvent « s'adapter » à leur taille, soit en s'agrandissant pour remplir l'espace inutilisé, soit en rétrécissant pour éviter de déborder du conteneur parent.

Les concepts de base pour flexbox

Présentation des fonctionnalités de Flexbox.

Les liens entre flexbox et les autres méthodes de disposition

Relations entre Flexbox et les autres méthodes de mise en page, ainsi que les autres spécifications CSS.

Aligner des éléments dans un conteneur flexible

Fonctionnement des propriétés d'alignement des boîtes avec Flexbox.

Ordonner les éléments flexibles

Explication des différentes façons de modifier l'ordre et la direction des éléments, et présentation des problèmes potentiels liés à cette opération.

Contrôler les proportions des boîtes flexibles le long de l'axe principal

Explication des propriétés flex-grow, flex-shrink et flex-basis.

Maîtriser le passage à la ligne des éléments flexibles

Comment créer des conteneurs flexibles avec plusieurs lignes et contrôler l'affichage des éléments le long de ces lignes.

Cas d'utilisation classiques de flexbox

Modèles de conception courants qui sont des cas d'utilisation typiques de Flexbox.

Disposition en grille

La disposition en grille introduit un système de grille bidimensionnelle dans CSS. Les grilles peuvent être utilisées pour mettre en page les zones principales d'une page ou les petits éléments de l'interface utilisateur.

Les concepts de base des grilles CSS

Présentation des fonctionnalités de la mise en page en grille.

Le modèle de grille et les autres modèles de disposition

Comment la grille s'articule avec d'autres méthodes telles que l'alignement, le dimensionnement et la flexbox.

Placer les éléments sur les lignes d'une grille CSS

Comment placer des éléments par lignes numérotées.

Définir des zones sur une grille

Comment placer des éléments à l'aide de la syntaxe grid-template.

Utiliser des lignes nommées sur une grille

Comment nommer les lignes et placer les éléments par nom de ligne plutôt que par numéro.

Le placement automatique sur une grille CSS

Comment gérer l'algorithme de placement automatique et comprendre comment le navigateur place les éléments.

L'alignement des boîtes avec les grilles CSS

Comment aligner des éléments et répartir l'espace sur les deux axes dans la grille.

Les grilles CSS, les valeurs logiques et les modes d'écriture

Comment utiliser des propriétés et des valeurs relatives au flux plutôt que physiques avec la grille.

Les grilles CSS et l'accessibilitéS

Quelques considérations en matière d'accessibilité lors de l'utilisation de la mise en page en grille.

Construire des dispositions courantes avec des grilles CSS

Utilisation de la grille pour créer des mises en page courantes.

Sous-grille

Explication de la valeur de la sous-grille, qui fait partie du niveau 2 de la grille.

Disposition de maçonnerie

Explication de la fonctionnalité de disposition en maçonnerie dans le niveau 3 de la grille.

Alignement

L'alignement des boîtes pour les dispositions : en bloc, absolue, en tableau

Les propriétés d'alignement sont spécifiées pour la mise en page en bloc et en ligne, bien qu'il n'y ait pas encore de prise en charge par les navigateurs.

L'alignement des boîtes avec Flexbox

Les propriétés d'alignement sont apparues pour la première fois avec flexbox ; ce guide explique leur fonctionnement.

L'alignement des boîtes avec une grille CSS

Comment aligner des éléments dans une disposition en grille.

L'alignement des boîtes avec une disposition en colonnes

Comment l'alignement fonctionnera dans une disposition en colonnes.