Propriétés CSS liées à la mise en page en colonnes
Cet article explique les propriétés CSS liées à la mise en page en colonnes.
Vous pouvez apprendre à décrire les mises en page en colonnes.
YouTube Video
HTML pour l'aperçu
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section style="width: 100%; height: 350px;">
24 <h4>Columns Example</h4>
25 <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26 <section class="sample-view">
27 <section class="columns-container">
28 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31 <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32 <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33 <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34 </section>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>order</h3>
40 <section style="height: 300px;">
41 <header><h4>column-width: 250px</h4></header>
42 <section class="sample-view">
43 <div class="container">
44 <div class="item item-1">Item 1</div>
45 <div class="item item-2">Item 2</div>
46 <div class="item item-3">Item 3</div>
47 </div>
48 </section>
49 </section>
50 </article>
51 </main>
52</body>
53</html>Mise en page en colonnes
colonnes
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}La propriété CSS columns offre un moyen pratique d'afficher du contenu divisé en plusieurs colonnes. Avec une seule déclaration, vous pouvez facilement définir la largeur des colonnes et le nombre de colonnes, ce qui la rend adaptée à la conception responsive. Elle est particulièrement efficace lorsqu'une mise en page est nécessaire pour afficher un texte long verticalement et disposé en plusieurs colonnes, comme dans les journaux ou magazines.
- Dans cet exemple, le contenu est divisé en 3 colonnes avec un espacement de 20px et une règle de 2px entre les colonnes. De plus, l'élément
h5s'étend sur plusieurs colonnes.
columns est un raccourci pour les propriétés column-width et column-count.
Syntaxe de la propriété columns
1columns: <column-width> <column-count>;columns suit ce format.
<column-width>: Spécifie la largeur de chaque colonne. Vous pouvez utiliserautoou toute unité de longueur (par exemple,px,em,%, etc.) comme valeur.<column-count>: Spécifie le nombre de colonnes. Exprimé sous forme de valeur numérique.
Propriété column-width
1.container {
2 column-width: 250px;
3}column-width est une propriété qui spécifie la largeur minimale de chaque colonne. Lorsqu'elle est utilisée avec column-count, le placement et l'ajustement automatiques des colonnes deviennent possibles. Le navigateur prend en compte la largeur du conteneur et calcule automatiquement le nombre de colonnes requis.
- Dans cet exemple, la largeur par colonne est de 250px, et le nombre optimal de colonnes est calculé en fonction de la largeur du conteneur.
Propriété column-count
1.container {
2 column-count: 3;
3}column-count est une propriété qui définit explicitement en combien de colonnes l'élément spécifié est divisé. Contrairement à column-width, cela fixe le nombre de colonnes.
- Dans cet exemple, le contenu du conteneur est divisé en trois colonnes.
Propriété column-gap
1.container {
2 column-gap: 20px;
3}column-gap est une propriété qui spécifie l'espace (l'écart) entre chaque colonne. Il existe également une propriété commune avec CSS Grid appelée gap, mais column-gap est utile lorsque vous voulez personnaliser uniquement les marges entre les colonnes.
- Dans cet exemple, il y a une marge de 20px entre chaque colonne. La valeur par défaut est de 16px.
Propriété column-rule
1.container {
2 column-rule: 2px solid #333;
3}column-rule est une propriété permettant de tracer des lignes entre les colonnes. Elle possède une syntaxe similaire à la propriété border et vous permet de spécifier la largeur, le style et la couleur de la ligne.
- Dans cet exemple, une ligne noire solide d'une largeur de 2px est affichée entre les colonnes.
column-rulepeut être subdivisée en trois propriétés suivantes :.column-rule-width: Spécifie la largeur de la ligne.column-rule-style: Spécifie le style de la ligne. Par exemple, il y asolid,dashed,dotted, etc.column-rule-color: Spécifie la couleur de la ligne.
Propriété column-span
1h5 {
2 column-span: all;
3}column-span est une propriété qui définit qu'un élément spécifique s'étend sur plusieurs colonnes. Elle est principalement utilisée pour des éléments tels que les en-têtes ou les titres. Il y a deux valeurs possibles :.
- none : L'élément ne s'étend pas sur les colonnes et reste dans une seule colonne. C'est la valeur par défaut.
- all : L'élément est affiché en s'étendant sur toutes les colonnes.
- Dans cet exemple, l'élément
h5est affiché en s'étendant sur plusieurs colonnes.
Propriété column-fill
1.container {
2 column-fill: balance;
3}column-fill est une propriété qui contrôle la répartition du contenu entre les colonnes. Normalement, les colonnes sont remplies de manière aussi uniforme que possible, mais cette propriété vous permet de spécifier un agencement différent. Les valeurs suivantes sont disponibles :.
- balance : Le contenu est disposé pour remplir les colonnes uniformément. C'est la valeur par défaut.
- auto : Les colonnes seront remplies automatiquement. La dernière colonne peut devenir plus longue.
- Ce paramètre ajuste la répartition pour que le contenu soit uniformément distribué.
Utilisation avec des Media Queries
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}La propriété columns peut être combinée avec des Media Queries pour supporter le design responsive. Vous pouvez modifier de manière flexible le nombre de colonnes et la largeur des colonnes en fonction des différentes tailles d'écran.
- Dans cet exemple, lorsque la largeur de l'écran est de 600px ou moins, il n'y aura qu'une seule colonne. Pour les écrans plus larges, il sera divisé en 3 colonnes d'une largeur de 200px chacune.
Résumé
La propriété CSS columns est un outil puissant pour implémenter facilement des mises en page utilisant plusieurs colonnes. Elle est particulièrement utile pour le design responsive et les mises en page textuelles qui privilégient la lisibilité. En combinant les propriétés associées, vous pouvez personnaliser de manière flexible le nombre et la largeur des colonnes, les espaces, les décorations, etc.
Cela permet une mise en œuvre facile de conceptions plus sophistiquées, alors n'hésitez pas à en profiter.
order
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}La propriété CSS order est utilisée pour contrôler l'ordre d'affichage des éléments lors de l'utilisation de mises en page Flexbox ou Grid. Normalement, les éléments sont rendus selon le balisage HTML, mais vous pouvez modifier leur ordre visuel en utilisant la propriété order. Cette propriété aide à concevoir des interfaces utilisateur flexibles et à créer des designs responsives.
- Dans cet exemple, les éléments sont balisés en HTML comme
Item 1,Item 2,Item 3, mais l'ordre d'affichage devientItem 2,Item 3,Item 1grâce à la propriété CSSorder.
Principes de base de la propriété order
La propriété order est appliquée aux éléments dans des conteneurs Flexbox ou Grid. Vous définissez l'ordre de placement en attribuant des valeurs entières à chaque élément. Par défaut, l'order de tous les éléments est défini sur 0. En modifiant cette valeur, vous pouvez spécifier l'ordre dans lequel les éléments sont affichés.
Syntaxe de base
1.item {
2 order: <integer>;
3}- Vous pouvez spécifier n'importe quel entier pour la valeur de l'
order. Des valeurs positives, négatives ou nulles peuvent être utilisées. Plus la valeur est petite, plus l'élément est affiché tôt, et plus elle est grande, plus il est affiché tard.
Utilisation de valeurs positives et négatives
Vous pouvez également attribuer des valeurs négatives à la propriété order. Les éléments avec des valeurs négatives sont affichés avant l'ordre par défaut.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}Dans cet exemple, Item 1 est défini avec order: -1, il apparaît donc en premier. En revanche, Item 3 est défini avec order: 1 et Item 2 avec order: 2, ils apparaissent donc dans cet ordre.
order en conception responsive
En conception responsive, il est possible de modifier l'ordre des éléments en fonction de la taille de l'écran. Par exemple, en vue mobile, vous pouvez modifier l'ordre des éléments pour afficher d'abord les informations importantes.
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}Dans cet exemple, en vue normale, les éléments sont affichés dans l'ordre Item 1, Item 2, Item 3, mais lorsque la largeur de l'écran est inférieure à 600px, Item 2 apparaît en premier, suivi de Item 3, et Item 1 en dernier.
Considérations sur l'order
L'utilisation de la propriété order peut entraîner un ordre visuel différent de l'ordre dans l'arbre DOM. Cela peut affecter les outils d'accessibilité, tels que les lecteurs d'écran. Lorsque l'ordre change, la navigation au clavier et d'autres technologies d'assistance peuvent ne pas fonctionner comme prévu. Il est donc nécessaire de réfléchir attentivement à l'impact sur l'expérience utilisateur lors de l'utilisation de order.
Conclusion
La propriété CSS order est un outil puissant qui permet de contrôler facilement l'ordre d'affichage des éléments dans les dispositions Flexbox ou Grid. En utilisant des valeurs positives ou négatives, vous pouvez modifier l'ordre des éléments de manière flexible, ce qui est particulièrement utile en conception responsive. Cependant, il faut être attentif à l'accessibilité et à la divergence entre l'ordre visuel et la structure HTML. Si ces aspects sont correctement pris en compte, la propriété order peut être utile pour créer des dispositions plus dynamiques et flexibles.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.