CSS - Propriété Display : Votre Passerelle vers la Magie Visuelle !

Salut là, futurs magiciens de CSS ! ? Je suis ravi d'entamer ce voyage avec vous alors que nous explorons le monde fascinant de la propriété CSS display. En tant que quelqu'un qui enseigne le CSS depuis plus d'une décennie, je peux vous assurer que maîtriser cette propriété, c'est comme ouvrir un coffre au trésor de possibilités de conception web. Alors, plongeons dedans !

Qu'est-ce que la Propriété Display ?

Avant de rentrer dans les détails, comprenons ce que fait réellement la propriété display. En termes simples, elle contrôle comment un élément est affiché sur une page web. Pensez-y comme le metteur en scène d'une pièce de théâtre, disant à chaque acteur (élément) comment se comporter sur scène (votre page web).

Valeurs Possibles

La propriété display est comme un couteau suisse - elle a de nombreux outils (valeurs) pour différentes situations. Voici un tableau des valeurs les plus courantes que nous allons discuter :

Valeur	Description
inline	Affiche un élément comme un élément en ligne (comme <span>)
block	Affiche un élément comme un élément en bloc (comme <div>)
inline-block	Affiche un élément comme un conteneur de bloc de niveau en ligne
none	L'élément est complètement retiré du document
flex	Affiche un élément comme un conteneur flexible de niveau bloc
inline-flex	Affiche un élément comme un conteneur flexible de niveau en ligne
grid	Affiche un élément comme un conteneur de grille de niveau bloc
inline-grid	Affiche un élément comme un conteneur de grille de niveau en ligne
table	Laisse l'élément se comporter comme un élément <table>
list-item	Laisse l'élément se comporter comme un élément <li>

S'applique à

La propriété display s'applique à tous les éléments HTML. Oui, vous avez bien entendu - tous ! Du modeste <span> au puissant <div>, chaque élément peut être influencé par cette propriété puissante.

Syntaxe DOM

Lorsque vous travaillez avec JavaScript et le Modèle d'Objet du Document (DOM), vous pouvez manipuler la propriété display comme suit :

element.style.display = "value";

Par exemple :

document.getElementById("myElement").style.display = "none";

Cela masquerait l'élément avec l'ID "myElement". De la magie, n'est-ce pas ?

CSS display - Valeur inline

Commençons avec la valeur inline. C'est la valeur par défaut pour des éléments comme <span>, <a>, et <img>.

<style>
.inline-element {
display: inline;
background-color: jaune;
padding: 5px;
}
</style>

<p>Ceci est un paragraphe avec un <span class="inline-element">élément en ligne</span> à l'intérieur.</p>

Dans cet exemple, l'élément <span> s'écoulera avec le texte, sans commencer sur une nouvelle ligne. C'est comme un mot dans une phrase - il ne perturbe pas le flux.

CSS display - Valeur block

Next up est la valeur block. C'est la valeur par défaut pour des éléments comme <div>, <p>, et <h1> à <h6>.

<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">Ceci est un élément en bloc.</div>
<div class="block-element">Ceci est un autre élément en bloc.</div>

Les éléments en bloc commencent sur une nouvelle ligne et s'étendent jusqu'à la largeur disponible. Ils sont comme des paragraphes dans un livre - chacun commence sur une nouvelle ligne.

CSS display - Valeur inline-block

La valeur inline-block est comme un hybride - elle combine des caractéristiques des valeurs inline et block.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Ces éléments seront placés côte à côte (comme inline), mais vous pouvez définir leur largeur et leur hauteur (comme block). C'est parfait pour créer des mises en page en grille sans utiliser des grilles ou des flex.

CSS display - Valeur none

La valeur none est comme un cape d'invisibilité pour vos éléments.

<style>
.hidden {
display: none;
}
</style>

<pVous pouvez voir ce paragraphe.</p>
<p class="hidden">Mais vous ne pouvez pas voir celui-ci !</p>

Les éléments avec display: none sont complètement retirés de la mise en page. C'est comme s'ils n'existaient pas du tout sur la page.

CSS display - Valeur table

CSS peut faire se comporter des éléments comme des éléments de table, même s'ils ne sont pas des balises <table>.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid noir;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">Cellule 1</div>
<div class="table-cell">Cellule 2</div>
</div>
<div class="table-row">
<div class="table-cell">Cellule 3</div>
<div class="table-cell">Cellule 4</div>
</div>
</div>

Cela crée une structure en grille sans utiliser des éléments de table. C'est génial pour créer des mises en page qui doivent se comporter comme des tables mais avec plus de flexibilité.

CSS display - Valeur flex

Flexbox est un outil de mise en page puissant, et il commence avec display: flex.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Élément Flex 1</div>
<div class="flex-item">Élément Flex 2</div>
<div class="flex-item">Élément Flex 3</div>
</div>

Cela crée un conteneur flexible avec des éléments qui peuvent être facilement alignés et distribués. C'est comme avoir une bande de gymnastes qui peuvent se tendre et se rétracter pour s'adapter à leur espace parfaitement.

CSS display - Valeur inline-flex

inline-flex est similaire à flex, mais le conteneur lui-même se comporte comme un élément en ligne.

<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">Élément 1</div>
<div class="flex-item">Élément 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Élément 3</div>
<div class="flex-item">Élément 4</div>
</div>

Cela vous permet d'avoir plusieurs conteneurs flexibles sur la même ligne, ce qui peut être utile pour créer des mises en page complexes.

CSS display - Valeur grid

Grid est un autre outil de mise en page puissant, initié par display: grid.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid vous permet de créer des mises en page complexes avec des rangées et des colonnes. C'est comme avoir un tableau parfait pour vos éléments !

CSS display - Valeur inline-grid

Similaire à inline-flex, inline-grid crée un conteneur de grille qui se comporte comme un élément en ligne.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

Cela vous permet d'avoir plusieurs conteneurs de grille sur la même ligne, ouvrant encore plus de possibilités de mise en page.

CSS display - Valeur list-item

Enfin, nous avons list-item, qui fait se comporter un élément comme un élément de liste.

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">Ceci est un élément de liste personnalisé</div>
<div class="custom-list">Ceci est un autre élément de liste personnalisé</div>

Cela est utile lorsque vous souhaitez créer des structures en liste sans utiliser des éléments <ul> ou <ol>.

Et voilà, les amis ! Nous avons parcouru le pays des propriétés display, du modeste inline au puissant grid. Souvenez-vous, la clé pour maîtriser le CSS est la pratique. Alors, allez-y et expérimentez avec ces propriétés. Qui sait ? Vous pourriez bien créer la prochaine grande chose dans le design web !

Bonne programmation, et que vos layouts soient toujours pixel-parfait ! ??

Credits: Image by storyset