Premiers pas avec CSS Layout

un mode d'écriture vertical, puis les phrases s'exécutent verticalement afin que le flux normal pose les blocs horizontalement

Le flux normal est le point de départ de toute mise en page: lorsque vous créez une mise en page CSS, vous prenez les blocs et vous leur faites faire autre chose que le flux normal.

Structurez votre document pour profiter du flux normal

Vous pouvez tirer parti du flux normal en vous assurant que votre document commence de manière structurée. Imaginez si – au lieu de ce concept de flux normal – le navigateur empile toutes vos boîtes dans le coin les unes sur les autres jusqu'à ce que vous ayez créé une mise en page. Cela voudrait dire que vous devriez placer chaque chose sur la page. Au lieu de cela, le navigateur affiche notre contenu d'une manière immédiatement lisible.

Si votre CSS ne se charge pas, l'utilisateur peut toujours lire le contenu, et les utilisateurs qui ne reçoivent pas de CSS (par exemple quelqu'un utilisant un lecteur d'écran) avoir le contenu livré dans l'ordre dans lequel il est dans le document. Cela rend important, du point de vue de l'accessibilité, que votre document HTML commence sa vie dans un bon ordre; Cependant, cela vous facilitera la vie en tant que développeur Web. Si votre contenu est dans l'ordre dans lequel un utilisateur s'attend à le lire, vous n'aurez pas besoin de modifier la mise en page pour le placer au bon endroit. Avec des méthodes de mise en page plus récentes, vous serez peut-être surpris du peu que vous avez à faire.

Par conséquent, avant de penser à la mise en page, pensez à la structure du document et à l'ordre dans lequel vous voulez lire le contenu.

S'éloigner du flux normal

Une fois que nous avons un document bien structuré, nous devons décider comment le prendre et le transformer en la disposition désirée. Cela impliquera de s'éloigner du flux normal, pour certaines parties de notre document. Nous avons tout un ensemble de méthodes de mise en page à utiliser. La première méthode que nous allons examiner est float car les flotteurs sont une excellente démonstration de ce que c'est de prendre un élément hors du flux normal.

Flotteurs

Les flotteurs sont utilisés pour déplacer un encadré à gauche ou à droite, permettant au contenu de s'afficher autour de lui.

Pour faire flotter un objet, utilisez la propriété CSS float et une valeur de gauche ou de droite. La valeur par défaut de float est none.

 .item {
    float: à gauche;
} 

Il est à noter que lorsque vous faites flotter un élément et que le texte l'entoure, ce qui se passe, c'est que les lignes de ce contenu sont raccourcies. Si vous faites flotter un objet et qu'une couleur d'arrière-plan est appliquée à la zone suivante contenant votre texte, cette couleur d'arrière-plan s'exécutera sous l'objet flottant.

Comme vous raccourcissez les boîtes de ligne pour faire de la place entre le flottant et le texte d'emballage, vous devez définir une marge sur l'élément flottant . Une marge sur le texte ne ferait que déplacer le texte depuis le bord du conteneur. Pour une image flottante à gauche, vous devez ajouter une marge à droite et en bas en supposant que vous voulez que l'image affleure le haut et le gauche du conteneur.

Voir le stylo Guide de mise en page: float par Rachel Andrew ( @rachelandrew ) le CodePen .

Clearing Floats

Une fois que vous avez flotté un élément, tous les éléments suivants entoureront cet élément flottant jusqu'à ce qu'ils Envelopper en dessous et l'écoulement normal continue. Si vous voulez éviter cela, vous devez effacer le flottant.

Sur l'élément que vous voulez commencer à afficher après le flottement, ajoutez la propriété clear avec une valeur de gauche pour indiquer le nettoyage d'un élément flottait à gauche, à droite pour effacer un élément flottant à droite, ou les deux pour effacer des flottants.

 .clear {
    clarifier les deux;
} 

La méthode ci-dessus fonctionne si vous voulez qu'un élément démarre après un flottement. Cela ne vous aidera pas si vous vous trouvez dans une situation où vous avez un objet flottant dans une boîte, avec du texte à côté. Si le texte est plus court que l'élément flottant, la boîte sera dessinée sous le contenu et ignorera le flottant. Comme nous l'avons déjà appris, les flotteurs raccourcissent les boîtes de lignes, le reste de la disposition continue dans le flux normal.

Pour éviter cette situation, nous devons effacer quelque chose à l'intérieur de la boîte. Nous pourrions ajouter un élément vide et régler cela pour tout effacer. Cela implique de coller des div vides dans notre document, ce qui n'est pas idéal et peut ne pas être possible si votre page est générée par un CMS. Donc, à la place, la méthode typique des flottants de compensation est ce qu'on appelle un hack de réparation claire. Cette méthode fonctionne en ajoutant du contenu généré par CSS, et en définissant cela pour effacer les deux.

Voir le plume Guide de mise en page: clearfix par Rachel Andrew ( @rachelandrew ) le ] CodePen .

Le contexte de mise en forme de bloc

Une autre façon de vider les flottants dans une boîte est d'invoquer un contexte de formatage de bloc (BFC) sur le conteneur. Un contexte de mise en forme de bloc contient tout ce qu'il contient, ce qui inclut les éléments flottants qui ne peuvent plus pointer le bas de la boîte. Il existe plusieurs façons de forcer un BFC, la plus courante lors de l'effacement des flottants est de définir la propriété overflow comme ayant une valeur autre que la valeur par défaut visible.

 .container {
    débordement: auto;
} 

L'utilisation du débordement de cette manière fonctionnera généralement, cependant, dans certaines situations, vous pourriez vous retrouver avec des ombres découpées ou des barres de défilement indésirables sur l'élément. Cela peut aussi sembler un peu déroutant dans votre feuille de style: avez-vous défini un débordement parce que vous avez voulu des barres de défilement ou juste pour obtenir cette capacité de nettoyage?

Pour clarifier l'intention et empêcher la création d'un BFC effets, vous pouvez utiliser flow-root comme valeur de la propriété display . La seule chose que affiche: flow-root est de créer un BFC, ce qui efface vos flottants sans causer d'autres problèmes.

 .container {
    affichage: flow-root;
} 

Utilisation des flottants hérités

Jusqu'à l'arrivée de méthodes de mise en page plus récentes, les flotteurs étaient utilisés pour créer des dispositions de colonnes. Cette technique fonctionnait en donnant une largeur à un ensemble d'éléments et en les faisant flotter l'un à côté de l'autre. Une gestion attentive de la taille en pourcentage de ces boîtes flottantes pourrait créer un effet de grille.

Je ne suggérerais pas de commencer un nouveau design maintenant et d'utiliser cette méthode. Cependant, il restera dans les sites existants pour de nombreuses années à venir. Par conséquent, si vous tombez sur un dessin où presque tout semble flotter, c'est la technique utilisée

Ressources et lectures supplémentaires sur les flotteurs et les flotteurs

Positionnement

Pour retirer un élément du flux normal ou déplacez-le autour de sa place dans le flux normal, vous pouvez utiliser la propriété position dans CSS. Lorsqu'ils sont en écoulement normal, les éléments ont une position de statique . Les éléments s'affichent les uns après les autres dans la dimension Bloc et si vous faites défiler la page, ils défilent avec lui.

Lorsque vous modifiez la valeur de la position, vous utilisez généralement des valeurs de décalage pour déplacer la boîte d'un point de référence particulier. Le point de référence utilisé dépend de la valeur de la position que vous utilisez

Position relative

Si un élément a position: relative alors le point de référence est l'endroit où il serait normalement en écoulement normal. Vous pouvez ensuite utiliser des valeurs de décalage pour les propriétés top left bottom et right pour déplacer la boite d'où elle devrait normalement être affiché.

 .item {
    position: relative;
    bas: 50px;
} 

Notez que les autres éléments de la page ne répondent pas à la nouvelle position de votre élément. L'endroit où il était positionné dans un flux normal est réservé, donc vous devez gérer vous-même les chevauchements.

Voir le stylo Guide de mise en page: positionnement relatif par Rachel Andrew ( @rachelandrew ) CodePen .

Positionnement absolu

Position : absolu sur un objet et il sera complètement supprimé du flux normal. L'espace qui a été laissé pour cela sera supprimé. L'élément sera alors positionné par rapport à son bloc conteneur qui, à moins qu'il ne soit imbriqué dans un autre élément positionné, sera la fenêtre d'affichage.

Par conséquent, la première chose qui arrivera si vous définissez position: absolute sur un élément, c'est qu'il se retrouve généralement collé en haut et à gauche de la fenêtre. Vous pouvez ensuite utiliser des valeurs de décalage pour les propriétés haut gauche bas et droite pour déplacer la boîte de cette position à l'endroit où vous Je veux qu'il le soit.

 .item {
    position: absolue;
    en haut: 20px;
    droite: 20px;
} 

Souvent, vous ne voulez pas que la boîte soit positionnée en fonction de la fenêtre, mais en référence à un élément conteneur, elle est à l'intérieur. Dans ce cas, vous devez donner à cet élément contenant une valeur de position différente de la valeur statique par défaut

En position position: relatif ne supprime pas l'élément du flux normal, c'est le choix habituel. Donnez à l'élément parent que vous souhaitez définir vos décalages à partir de la position : relative puis décalez le bloc absolument positionné des limites de cet élément.

Voir le plume Guide de mise en page: absolu positionnement par Rachel Andrew ( @rachelandrew ) le CodePen .

Positionnement fixe

Quelque chose avec position: fixe sera positionné dans la plupart des cas par rapport à la fenêtre, et retiré du flux de documents afin qu'aucun espace ne lui soit réservé. Lorsque la page défile, l'élément fixe reste en position par rapport à la fenêtre, car le reste du contenu dans le flux normal défile comme d'habitude.

 .item {
    position: fixe;
    en haut: 20px;
    gauche: 100px;
} 

Cela peut être utile pour activer un panneau de navigation fixe qui reste à l'écran, par ex. tandis que le contenu défile. Comme avec d'autres valeurs de positionnement, vous pouvez provoquer des chevauchements en faisant cela, vous devez donc veiller à ce que tout le contenu puisse être lu et ne se retrouve pas derrière un élément fixe.

Voir le Pen Smashing Guide to Layout: Positionnement fixe par Rachel Andrew ( @rachelandrew ) le CodePen .

Pour positionner un élément fixe autre que relatif à la fenêtre, vous devez avoir un élément contenant l'une des propriétés transformer perspective ou est définie sur autre chose que leur valeur par défaut aucune . Dans ce cas, cet élément deviendra le bloc conteneur et vos décalages seront liés à ce bloc plutôt qu'à la fenêtre d'affichage.

Positionnement collé

Position position: collant sur un élément provoquera l'élément Faites défiler le document comme il le ferait normalement, cependant, une fois qu'il atteint un certain point par rapport à la fenêtre (en utilisant les décalages habituels), il "colle" et commence à agir comme position: fixe . Ceci est une valeur plus récente et est moins bien supporté dans les navigateurs que d'autres méthodes, cependant, il revient à défiler juste avec la page os est une valeur joliment utilisée comme une amélioration sans causer de problèmes si elle n'est pas supportée.

. {
    position: collant;
    en haut: 0;
} 

Voici comment créer l'effet populaire d'une barre de navigation faisant défiler le contenu, puis s'arrêter en haut de la fenêtre pour rester à l'écran lorsque vous faites défiler le contenu.

Voir le Pen Smashing Guide to Mise en page: positionnement collant par Rachel Andrew ( @rachelandrew ) le CodePen .

Ressources et lectures supplémentaires sur le positionnement

Flex Layout

Flexible Box Layout ( Flexbox) est une méthode de mise en page conçue pour une mise en page unidimensionnelle. Unidimensionnel signifie que vous souhaitez disposer votre contenu d'affilée ou de colonne. Pour transformer votre élément en une mise en page flexible, vous utilisez la propriété display avec une valeur de flex .

 .container {
    affichage: flex;
} 

Les enfants directs de cet élément deviennent des éléments flex, ils s'alignent en ligne, alignés sur le bord de départ dans la direction en ligne.

Voir le stylo Guide de mise en page: flex par Rachel Andrew ( @rachelandrew ) le CodePen .

Les axes de Flexbox

Dans l'exemple ci-dessus, j'ai décrit les éléments comme étant alignés sur le bord de départ de notre ligne dans la direction inline, plutôt que de les décrire comme étant alignés à gauche. Nos éléments sont disposés dans une rangée parce que la valeur par défaut de la propriété flex-direction est ligne cela crée une ligne dans la direction inline, la direction dans laquelle les phrases s'exécutent. Comme nous travaillons en anglais, une langue de gauche à droite, le début d'une rangée est sur la gauche et donc nos articles commencent là. La valeur de flex-direction définit ainsi l'axe principal de Flexbox

L'axe transversal traverse donc l'axe principal à angle droit. Si votre flex-direction est ligne et que vos éléments sont affichés dans la direction en ligne, votre axe croisé s'exécute dans la direction du Bloc. Si votre flex-direction est colonne donc les éléments sont dans la direction du Bloc, alors votre axe croisé est le long de la ligne.

Si vous avez l'habitude de penser en termes de main et l'axe croisé en travaillant avec Flexbox, il facilitera beaucoup de choses.

Direction et ordre

Flexbox te donne la capacité de changer la direction des articles sur l'axe principal en utilisant un flex-direction ] valeur de rangée inversée ou colonne inversée .

Voir le stylo Guide de mise en page écrasante: flex-direction de Rachel Andrew () @rachelandrew ) le CodePen .

Vous pouvez également modifier l'ordre des éléments flex individuels avec la propriété order . Cependant, vous devez faire très attention car cela peut poser un problème à tout utilisateur qui navigue en utilisant le clavier plutôt qu'à une souris ou à un écran tactile car l'ordre des onglets du document suivra l'ordre dans lequel le contenu se trouve dans la source. Voir la section ci-dessous sur Visual and Document Order pour plus de détails.

The Flex Properties

Les propriétés flex sont comment contrôler les ratios d'éléments flexibles le long de l'axe principal. Les trois propriétés sont:

• flex-shrink
• flex-shrink
• flex-basis

Elles sont généralement utilisées dans leur forme abrégée de la propriété flex la première valeur étant flex-grow le second flex-shrink et le troisième flex-basis .

 .item {
    flex: 1 1 200px;
} 

La valeur de flex-basis donne une taille que l'élément aura avant que la croissance ou le rétrécissement ait lieu. Dans l'exemple ci-dessus, cette taille est de 200 pixels, donc nous donnerions à chaque élément 200 pixels d'espace. Il est peu probable que notre conteneur se divise nettement de 200 pixels et il y aura donc des espaces restants ou pas assez d'espace pour tous les éléments s'ils ont chacun 200 pixels. Les propriétés flex-grow et flex-shrink nous permettent de contrôler ce qu'il advient des éléments s'il y a trop ou pas assez d'espace pour eux

If flex -grow est défini sur n'importe quelle valeur positive, puis l'élément est autorisé à croître pour occuper de l'espace. Par conséquent, dans notre exemple ci-dessus, après avoir donné à chaque élément 200 pixels, tout espace supplémentaire sera partagé entre les éléments.

Si flex-shrink est défini sur une valeur positive, l'élément peut rétrécir dans la situation où un débordement se produirait si tous les articles recevaient leur flex-basis . S'il n'y avait pas assez d'espace dans le conteneur dans notre exemple, chaque article se rétrécirait d'une quantité égale à réduire jusqu'à ce que tous les éléments rentrent dans le conteneur.

Les flexibles flex et shrink les valeurs peuvent être n'importe quelle valeur positive. Un objet avec une plus grande valeur flex-grow recevra plus de l'espace disponible en proportion de sa croissance, et avec une plus grande valeur flex-shrink plus sera éliminé en rétrécissant. 19659093] Voir le stylo Smashing Guide de mise en page: les propriétés flex par Rachel Andrew ( @rachelandrew ) le CodePen .

Comprendre la façon dont ces propriétés flex le travail est vraiment la clé pour comprendre Flexbox, et les ressources énumérées ci-dessous vous donneront tous les détails. Cependant, pensez à utiliser Flexbox lorsque vous avez un tas de choses que vous voulez étirer et écraser dans un conteneur dans une dimension. Si vous essayez d'aligner les lignes et les colonnes, vous voulez une grille, et dans ce cas, Flexbox n'est probablement pas l'outil du travail. 19659015] CSS Grid Layout a été conçu comme une méthode de mise en page en deux dimensions. En deux dimensions signifie que vous souhaitez placer votre contenu dans des lignes et des colonnes. Comme avec Flexbox, Grid Layout est une valeur de display et donc pour commencer à utiliser Grid vous devriez commencer avec display: grid sur votre conteneur, puis configurer des colonnes et / ou des lignes en utilisant les propriétés grid-template-columns et grid-template-rows .

 .container {
    affichage: grille;
    grille-template-colonnes: 200px 200px 200px;
    grid-template-rows: 200px 200px;
} 

Le CSS ci-dessus créerait une grille de taille fixe, avec des pistes de colonnes et de lignes complètement fixes. Ce n'est probablement pas ce que vous voulez sur le web, et Grid vous a bien couvert. La valeur par défaut pour toute piste est auto ce qui peut généralement être considéré comme «assez grand pour le contenu». Si nous ne créions pas de piste, les lignes seraient créées pour que nous puissions prendre n'importe quel contenu ajouté, et ceux-ci seraient auto taille. Un modèle courant consiste à spécifier des pistes de colonnes, mais permet à Grid de créer des lignes selon les besoins.

Bien que vous puissiez configurer vos pistes de colonnes et de rangs en utilisant n'importe quelle unité de longueur ou pourcentage, vous pouvez utiliser le fr ] unité, une unité créée pour la disposition de la grille. L'unité fr est une unité flex, et indique une part de l'espace disponible dans le conteneur de la grille.

La grille peut vous distribuer de l'espace; vous n'avez pas besoin de calculer des pourcentages pour vous assurer que les choses tiennent dans un conteneur. Dans l'exemple ci-dessous, nous créons des colonnes en utilisant l'unité fr et en permettant la création automatique de pistes. Nous utilisons également grid-gap pour espacer nos pistes (voir la section sur l'alignement des boîtes pour plus de détails sur les espaces et la disposition des grilles).

Voir le stylo Guide de mise en page: a simple grille par Rachel Andrew ( @rachelandrew ) le CodePen .

Comme avec Flexbox et flex-grow ou flex-shrink l'unité fr traite du partage de l'espace disponible. Une valeur supérieure fr pour une piste signifie qu'elle obtient plus de l'espace disponible en proportion. Vous pouvez également mélanger fr unités et longueurs absolues. L'espace nécessaire pour les longueurs sera soustrait de l'espace disponible avant de travailler sur les fr unités

Voir le stylo Guide de mise en page brisant: fr unités et longueurs absolues par rachelandrew ( @rachelandrew ) le CodePen .

Terminologie de grille

Une Grille a toujours deux axes: l'Axe Inline fonctionne dans le sens où les mots sont disposés sur la page et l'axe des blocs dans la direction où les blocs sont disposés

Le conteneur de la grille est l'élément que vous avez défini affichage: grid activé. Vous avez ensuite des lignes de grille, créées par les colonnes et les lignes que vous avez spécifiées lors de l'utilisation de grid-template-columns et grid-template-rows . La plus petite unité de la grille (entre quatre lignes qui se croisent) est appelée cellule de grille, tandis qu'une collection de cellules de grille qui forment un rectangle complet est appelée zone de grille.

Placement automatique de la grille

Dès que vous créez une grille , les enfants directs de votre conteneur de grille commencent à se mettre en place, un dans chaque cellule de la grille. Ils le font selon les règles d'auto-placement de la grille. Ces règles garantissent que chaque élément est placé dans une cellule vide en évitant les éléments qui se chevauchent.

Tout enfant direct du conteneur de la grille auquel vous n'avez pas attribué de position sera placé conformément aux règles de placement automatique. Dans l'exemple ci-dessous, j'ai fait en sorte que chaque troisième élément couvre des pistes à deux rangs, tout en étant automatiquement placé en termes de ligne de départ.

Voir le stylo Guide de mise en page: placement automatique par Rachel Andrew ( @rachelandrew ) le CodePen .

Positionnement basé sur la ligne de base

La manière la plus simple de positionner des éléments sur la grille est avec le positionnement basé sur la ligne, donner les règles de l'objet pour lui dire de passer d'une ligne de la grille à l'autre. Par exemple, si j'ai une grille avec trois colonnes et deux lignes, je peux placer un élément de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne 1 à la ligne 3. Il couvrira quatre cellules au total , couvrant deux pistes de colonne et deux colonnes.

 .item {
    grille-début de colonne: 1;
    grille-fin de colonne: 3;
    grille-début de rangée: 1;
    grille-rangée-fin: 3;
} 

Ces propriétés peuvent être représentées comme un raccourci, grid-column et grid-row avec la première valeur étant début et la seconde fin .

 .item {
    grille-colonne: 1/3;
    grille-rangée: 1/3;
} 

Les éléments de la grille peuvent occuper les mêmes cellules, ce qui permet la création de dessins avec un contenu qui se chevauche. Les éléments s'empilent de la façon habituelle dont le contenu est empilé sur le Web, avec des éléments qui descendent vers le bas de la source et apparaissent au-dessus des autres éléments. Encore, vous pouvez utiliser z-index pour contrôler ceci.

Voir le stylo Smashing Guide de mise en page: placement basé sur la ligne par Rachel Andrew ( @rachelandrew ) CodePen .

Positionnement avec des zones nommées

Vous pouvez également positionner des éléments sur votre grille en utilisant des zones nommées. Pour utiliser cette méthode, attribuez un nom à chaque élément, puis décrivez la disposition en tant que valeur de la propriété grid-template-areas .

 .item1 {
    zone de grille: a;
}

.item2 {
    zone de grille: b;
}

.item3 {
    zone de grille: c;
}

.récipient {
    affichage: grille;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    zones de gabarit de grille:
     "a a b b"
     "a c c";
} 

Il y a quelques règles à retenir lors de l'utilisation de cette méthode. Si vous souhaitez qu'un élément couvre plusieurs cellules, vous devez répéter le nom. Les zones doivent former un rectangle complet, pas de pièces en forme de L ou de Tetris autorisées! La grille doit être complète – chaque cellule doit être remplie. Si vous voulez laisser un espace blanc, remplissez cette cellule avec . . Par exemple, dans le CSS ci-dessous, je laisse le coin en bas à droite vide.

 .container {
    affichage: grille;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    zones de gabarit de grille:
     "a a b b"
     "a c."
} 

C'est une bonne façon de travailler car tout le monde regardant le CSS peut voir exactement comment la mise en page va fonctionner.

Voir le stylo Guide de mise en page de la mise en page: grid-template-areas par rachelandrew ( @rachelandrew ) le CodePen .

Ressources et autres lectures pour la disposition de la grille

Il y a beaucoup plus de CSS Grid Layout que ce rapide aperçu a partagé, et les ressources ci-dessous vous aidera à apprendre la spécification. Les composants et votre mise en page complète peuvent être des grilles, choisissez Grid Layout si vous avez une mise en page bidimensionnelle à créer – quelle que soit sa taille ou sa taille.

CSS Grid Layout "Technologie Web pour développeurs, MDN web docs, Mozilla

J'ai également écrit un certain nombre d'articles ici sur Smashing Magazine qui peut vous aider à creuser dans divers Grid concepts:

Visual and Document Order

Au début de cet article, je suggérais que vous commenciez avec votre document dans un ordre logique, de haut en bas, car cela serait utile à la fois pour l'accessibilité et en termes de la façon dont la mise en page CSS fonctionne. De notre courte introduction à Flexbox et CSS Grid, vous pouvez voir qu'il serait possible de déplacer les choses assez radicalement de cet ordre. Cela risque de causer un problème.

Les navigateurs suivront la source du document pour toute utilisation non visuelle du document. Par conséquent, un lecteur d'écran lira l'ordre des documents et toute personne utilisant un clavier pour naviguer parcourra le document dans l'ordre dans lequel il se trouve dans la source et non dans l'ordre d'affichage. De nombreux utilisateurs de lecteurs d'écran ne sont pas complètement aveugles et peuvent donc utiliser le lecteur d'écran en même temps qu'ils peuvent voir où ils se trouvent dans le document. Dans les deux cas, un affichage qui est mélangé par rapport à la source peut provoquer une situation très confuse.

Soyez très conscient lorsque vous déplacez des éléments dans l'ordre où ils se trouvent dans la source. Si vous vous retrouvez à réorganiser l'ordre des éléments en CSS, devriez-vous vraiment revenir en arrière et réorganiser votre document? Testez pour voir si vous pouvez encore tabuler autour de votre document et l'ordre visuel a du sens.

Ressources et autres lectures pour l'ordre visuel et document

Génération de boîtes

Tout ce que vous mettez sur une page Web crée une boîte tout dans cet article décrit comment vous pouvez utiliser CSS pour mettre en forme ces zones dans votre conception, cependant, dans certaines circonstances, vous ne souhaiterez peut-être pas créer de boîte du tout. Il existe deux valeurs de la propriété display qui traitent des situations où vous ne voulez pas de boîtes.

Ne pas générer la boîte ou le contenu ( afficher: aucun )

Si vous voulez que l'élément et tout le contenu de cet élément, y compris les éléments enfants, ne soient pas générés, vous pouvez utiliser display: none . L'élément ne sera plus affiché et aucun espace ne sera réservé pour l'endroit où il aurait été.

 .item {
    affichage: aucun;
}

Ne pas générer cet élément, mais générer des éléments enfant ( afficher: contenus )

Une valeur plus récente de afficher est afficher: contenus . Appliquer display: contents à un élément et la boîte pour cet élément ne sera pas générée mais tous les enfants seront générés normalement. Cela peut être utile si vous voulez que les éléments enfants indirects deviennent partie intégrante d'une disposition flexible ou en grille

Dans l'exemple ci-dessous, le premier élément flexible contient deux enfants imbriqués, mais comme il est défini sur affiche: contenu sa boîte n'est pas louée et les enfants se présentent comme s'ils étaient l'enfant direct et deviennent des objets flexibles. Supprimer display: content de cet élément pour voir comment change la disposition.

Voir le Pen Guide de mise en page de Smashing: afficher: sommaire de Rachel Andrew ( @rachelandrew ) le CodePen .

Ressources et autres lectures pour la génération de boîtes

Alignement

L'alignement a été quelque chose d'un sujet délicat sur le web jusqu'à récemment, avec des moyens très limités d'aligner correctement éléments à l'intérieur des boîtes. Ceci est en train de changer avec le module Box Alignment, que vous utiliserez actuellement pour contrôler l'alignement dans les conteneurs Grid et Flex. À l'avenir, d'autres méthodes de mise en page implémenteront également ces propriétés d'alignement. The list of alignment properties detailed in the Box Alignment specification is as follows:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

As layout models have different features, alignment works slightly differently depending on the layout model in use. Let’s take a look at how alignment works with some simple Grid and Flex Layouts.

The align-items and justify-items properties set the align-self and justify-self properties as a group. These properties align the items inside their Grid Area.

See the Pen Smashing Guide to Layout: align-items, justify-items, align-self, justify-self by Rachel Andrew (@rachelandrew) on CodePen.

The align-content and justify-content properties align the grid tracks, where there is more space in the Grid Container than is needed to display the tracks.

See the Pen Smashing Guide to Layout: align-content, justify-content by Rachel Andrew (@rachelandrew) on CodePen.

In Flexbox, align-items and align-self deal with alignment on the Cross Axis, while justify-content deals with space distribution on the main axis.

See the Pen Smashing Guide to Layout: Flex justify-content, align-items, align-self by Rachel Andrew ( @rachelandrew) on CodePen.

On the cross axis, you can use align-content where you have wrapped flex lines and additional space in the flex container.

See the Pen Smashing Guide to Layout: flex align-content by Rachel Andrew (@rachelandrew) on CodePen.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gapgrid-row-gapand grid-gap. These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gaprow-gapand gap. Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don’t want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

.container {
    column-width: 300px;
}

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count. In this case, the browser will share the space between the number of columns you have asked for.

.container {
    column-count: 3;
}

If you add both column-width and column-countthen the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

.container {
    column-width: 300px;
    column-count: 3;
}

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gapit will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-widthcolumn-rule-colorand column-rule-styleand acts in the same way as border. Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap.

See the Pen Smashing Guide to Layout: multicol by Rachel Andrew (@rachelandrew) on CodePen.

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

h3 {
    column-span: all;
}

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

See the Pen Smashing Guide to Layout: multicol span by Rachel Andrew (@rachelandrew) on CodePen.

You can only use column-span: all or column-span: none; it isn’t possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

Fragmentation

Multiple-Column Layout is an example of fragmentation. In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid. Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

.card {
    page-break-inside: avoid;
    break-inside: avoid;
}

If you want to avoid a break directly after a heading, you can use the break-after property.

.container h2 {
    page-break-after: avoid;
    break-after: avoid;
}

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

See the Pen Smashing Guide to Layout: multicol fragmentation by Rachel Andrew (@rachelandrew) on CodePen.

Resources And Further Reading For Fragmentation

Selecting Layout Types: How To Choose?

Most web pages will use a mixture of these layout types, and each spec defines exactly how they interact with each other. For example, you might have a Grid Layout in which some Grid Items are also Flex containers. Some of those flex containers might be a containing block for a positioned item or have an image floated inside. The specifications are written with an expectation that we will be mixing layout models, according to what is best for the content that we are laying out. In this guide, I have tried to give an overview of the basic way that each layout type behaves, in order to help you hone in on what is likely to be the best way to achieve a particular effect.

However, don’t be afraid to play around with different ways of creating the design you have in mind. There are fewer places than you might imagine where you should worry about your choices causing any real problem. Start with a good document structure, and take care that you are not disconnecting the visual display from that order. Much of the rest is just a case of testing that things work as you expect in your target browsers.

(il)