justify-content

La propriété CSS justify-content indique la façon dont l'espace doit être réparti

entre et autour des éléments selon l'axe principal d'un conteneur flexible ou selon
l'axe en ligne lorsque le conteneur est une grille.

L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein

d'une grille CSS.

Syntaxe
/* Alignement « géométrique » */
justify-content: center; /* Éléments groupés au centre */
justify-content: start; /* Éléments groupés au début */
justify-content: end; /* Éléments groupés à la fin */
justify-content: flex-start; /* Éléments flexibles groupés au début */
justify-content: flex-end; /* Éléments flexibles groupés à la fin */
justify-content: left; /* Éléments groupés à gauche */
justify-content: right; /* Éléments groupés à droite */

/* Alignement par rapport à la ligne de base */

/* justify-content ne prend pas de valeurs relatives à la ligne de base */

/* Alignement normal */
justify-content: normal;

/* Alignement distribué */
justify-content: space-between; /* Les éléments sont répartis équitablement
Le bord du premier est aligné sur le
début du conteneur et la fin du dernier
est alignée sur la fin du conteneur */
justify-content: space-around; /* Les éléments sont répartis équitablement
À chaque extrémité, entre le bord du
conteneur et le premier/dernier élément
on a la moitié de l'espace appliqué
entre
chaque élément */
justify-content: space-evenly; /* Les éléments sont répartis équitablement
Tous les éléments sont séparés par le
même
espace */
justify-content: stretch; /* Les éléments sont répartis équitablement
et
les éléments dimensionnés avec 'auto'
sont
étirés afin de remplir le conteneur */

/* Alignement pour le dépassement */

justify-content: safe center;
justify-content: unsafe center;

/* Valeurs globales */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
Copy to Clipboard
Valeurs
start

Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du
premier élément est aligné avec le bord du conteneur.

end

Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du
dernier élément est aligné avec le bord du conteneur.

flex-start

Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens
du conteneur flexible. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les
éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme
de start.

flex-end

Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens
du conteneur flexible. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les
éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme
de end.

center

Les éléments sont regroupés au centre du conteneur selon l'axe principal.

left

Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas
parallèle à l'axe en ligne, cette valeur est synonyme de start.

right

Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas
parallèle à l'axe en ligne, cette valeur est synonyme de start.

normal

Les éléments sont groupés sur leur position par défaut, comme si justify-
content n'avait pas été utilisé. Cette valeur se comporte comme stretch dans les
conteneurs de grille et les conteneurs flexibles.

space-between

Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre
chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et
le dernier élément est aussi aligné sur le bord de l'élément.
space-around

Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre
chaque élément est le même. L'espace entre le bord du conteneur et le premier
élément et l'espace entre le dernier élément et le bord du conteneur représente la
moitié de l'espace entre deux éléments.

space-evenly

Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre
le bord du conteneur et le premier élément, et entre le dernier élément et le bord du
conteneur est le même.

stretch

Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du
conteneur, tous les éléments dimensionnés avec auto sont agrandis avec le même
supplément, tout en respectant les contraintes imposées par max-height/max-
width (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit
exactement le conteneur sur l'axe principal. La valeur stretch n'est pas prise en
charge pour les boîtes flexibles (flexbox)

safe

Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi
indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera
plutôt aligné avec la valeur start.

unsafe

Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la
situation de dépassement ou les contraintes de taille, la valeur utilisée pour
l'alignement est respectée.

Combinateur de voisin direct

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-
ci « suit » un élément donné et que les deux éléments sont les fils d'un même
élément parent.

/* Ne cible que les paragraphes situé directement après une image */

img + p {
font-style: bold;
}
Copy to Clipboard
Syntaxe
premier_element + element_cible { styles }
Copy to Clipboard

Exemples
CSS
li:first-of-type + li {
color: red;
}
Copy to Clipboard

HTML
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
Copy to Clipboard

Résultat

Sélecteurs d'attribut
Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un
attribut ou selon la valeur donnée d'un attribut.

/* Les éléments <a> avec un attribut title */

a[title] {
color: purple;
}

/* Les éléments <a> avec un href qui correspond */

/* à "https://example.org" */
a[href="https://example.org"] {
color: green;
}

/* Les éléments <a> dont href contient "example" */

a[href*="example"] {
font-size: 2em;
}

/* Les éléments <a> dont href finit par ".org" */

a[href$=".org"] {
font-style: italic;
}

/* Les éléments <a> dont l'attribut class contient le mot logo */

/* comportement identique à a.logo */
a[class~="logo"] {
padding: 2px;
}
Copy to Clipboard
Syntaxe
[attr]

Permet de cibler un élément qui possède un attribut attr.

[attr=valeur]

Permet de cibler un élément qui possède un attribut attr dont la valeur est

exactement valeur.

[attr~=valeur]

Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur.

Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si
au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.

[attr|=valeur]

Permet de cibler un élément qui possède un attribut attr dont la valeur est

exactement valeur ou dont la valeur commence par valeur suivi immédiatement
d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des
correspondances avec des codes de langues.

[attr^=valeur]

Permet de cibler un élément qui possède un attribut attr dont la valeur commence

par valeur.

[attr$=valeur]

Permet de cibler un élément qui possède un attribut attr dont la valeur se termine

par valeur.

[attr*=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au

moins une occurrence de valeur dans la chaîne de caractères.

[attr operateur valeur i]

On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas
prise en compte (pour les caractères contenus sur l'intervalle ASCII).

[attr operateur valeur s] Experimental

Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de

valeur sensible à la casse (pour les caractères ASCII).

Syntaxe formelle
Error: could not find syntax for this item
Exemples
Liens
CSS
a {
color: blue;
}

/* Liens internes commençant avec "#" */

a[href^="#"] {
background-color: gold;
}

/* Liens avec "example" n'importe où dans l'URL */

a[href*="example"] {
background-color: silver;
}

/* Liens avec "insensitive" n'importe où dans l'URL,

quelle que soit la casse */
a[href*="insensitive" i] {
color: cyan;
}

/* Liens avec "cAsE" n'importe où dans l'URL,

et avec cette casse donnée.*/
a[href*="cAsE" s] {
color: pink;
}

/* Liens qui finissent ".org" */

a[href$=".org"] {
color: red;
}
Copy to Clipboard

HTML
<ul>
<li><a href="#internal">Lien interne<a></li>
<li><a href="http://example.com">Lien d'exemple</a></li>
<li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
<li><a href="http://example.org">Lien vers example.org</a></li>
</ul>
Copy to Clipboard

Résultat
Langues
CSS
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
div[lang] {
font-weight: bold;
}

/* Tous les divs en anglais américains seront bleus. */

div[lang~="en-us"] {
color: blue;
}

/* Tous les divs en portugais seront verts. */

div[lang="pt"] {
color: green;
}

/* Tous les divs en chinois seront rouges (chinois

simplifié (zh-CN) ou traditionnel (zh-TW). */
div[lang|="zh"] {
color: red;
}

/* Tous les divs en chinois traditionnels pour l'attribut

`data-lang` seront violet. */
/* Note : Les doubles quotes ne sont pas strictement nécessaires
ici */
div[data-lang="zh-TW"] {
color: purple;
}
Copy to Clipboard

HTML
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
Copy to Clipboard

Résultat
Listes ordonnées
Experimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez
consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son
comportement modifié dans le futur en fonction des évolutions de la spécification.

La spécification HTML indique que l'attribut type doit être testé sans sensibilité à la casse
car il est généralement utilisé avec l'élément <input>. Si on souhaite utiliser un sélecteur
d'attribut avec type d'une liste ordonnée (<ol>), cela ne fonctionnera pas sans le modificateur
de sensibilité à la casse.

CSS
/* Les types de liste devront être utilisé avec le
marqueur pour la casse vu les spécifications HTML */
ol[type="a"] {
list-style-type: lower-alpha;
background: red;
}

ol[type="a" s] {
list-style-type: lower-alpha;
background: lime;
}

ol[type="A" s] {
list-style-type: upper-alpha;
background: lime;
}
Copy to Clipboard

HTML
<ol type="A">
<li>Liste d'exemple</li>
</ol>
Copy to Clipboard

Résultat

Sélecteurs enfant
Le combinateur > sépare deux sélecteurs et cible seulement les éléments
correspondant au second sélecteur qui sont des enfants directs des éléments ciblés
par le premier sélecteur.

/* Les éléments <li> qui sont des enfant d'un */

/* <ul class="mon-truc"> */
ul.mon-truc>li {
margin: 2em;
}
Copy to Clipboard

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur

descendant, l'expression formée par la combinaison des deux sélecteurs cible les
éléments correspondant au second sélecteur qui ont un parent de n'importe quel
niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts »
dans le DOM.

Syntaxe
selecteur1 > selecteur2 { déclarations CSS }
Exemples
CSS
span {
background-color: white;
}

div > span {

background-color: blue;
}
Copy to Clipboard

HTML
<div>
<span>Premier span du div.
<span>Deuxième span, dans un span dans un div.</span>
</span>
</div>
<span>Troisième span, en dehors de tout div.</span>
Copy to Clipboard

Résultat

Premier span du div. Deuxième span, dans un span dans un div.

Troisième span, en dehors de tout div.