W11 - Conception de documents et d’interfaces numériques

Adrien Krähenbühl IUT Robert Schuman

Avant de commencer

Version de CSS
Ce cours se base entièrement sur CSS 3

Rappel doc & stackoverflow-like
\(\rightarrow\) ne recopiez pas bêtement
\(\rightarrow\) developpez.mozilla est une doc. fiable

Premier QCM
\(\rightarrow\) sur Moodle
\(\rightarrow\) au début du prochain TP

Ce que l’on a vu

  1. Concepts du HTML
    • les balises et les éléments
    • les attributs
    • l’imbrication
  2. Les balises
    • structurelles (<html>, <head>, <body>, <section>, …)
    • textuelles, liens, listes, définitions
    • tableaux, formulaires, medias.
  3. Navigateurs et protocole HTTP
    • Firefox, Chrome(ium), Opera, etc.
    • les requête HTTP et les URL

Au programme aujourd’hui

  1. Les concepts du CSS
    • syntaxe
  2. Les sélecteurs
    • sélecteurs simples
    • combinateurs
    • pseudo-classes
  3. Les propriétés
    • de textes et de blocs
    • comportement en ligne et en bloc
    • marges et padding
  4. Flex (certainement en TD)
    • principe
    • propriétés du conteneur
    • propriétés des items

Et jusqu’à la fin du module

Deux cycles vont s’enchaîner :

1 TD + 5 TPs
  • CSS basique
  • Flex et transitions
  • (Media queries)
1 TD + 5 TP
  • Javascript
  • 2\(^{ème}\) QCM au premier TP


Attention, chaque TP étant basé sur le précédent,
veillez à ne pas accumuler le retard.

CSS, les concepts

CSS, qu’est-ce que c’est ?

Le Cascading Style Sheets est un langage :

  • permettant de décrire l’apparence d’une page HTML
  • définit par le W3C
  • actuellement à la version 3

Inclure du CSS dans du HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style1.css">
        <link rel="stylesheet" href="style2.css">
        <title>Ma page</title>
    </head>
    <body> ... </body>
</html>

index.html


  • L’utilisation d’un fichier CSS se déclare avec un élément <link> dans l’entête de la page.
  • Un document HTML peut se référer à plusieurs fichiers CSS.

La syntaxe

selecteur1 {
    proprieteA: valeur;
    proprieteB: valeur;
}

selecteur2,
selecteur3 {
    ...
}

...

style1.css

h1 {
    color: red;
    font-size: 20px;
}

article,
section {
    border: 1px solid black;
}

...

style1.css


  • Les sélecteurs définissent un ou plusieurs éléments HTML auxquels affecter une ou plusieurs propriétés.
  • On peut appliquer les mêmes propriétés à plusieurs sélecteurs en les séparant par une virgule.

L’héritage

<section>
    <article>
        <h3>Mon titre</h3>
        <p> Alléchant </p>
    </article>
    <aside>
        <h3> Mon autre titre </h3>
        <p> Bazinga </p>
    </aside>
</section>
section {}


Mon titre

Alléchant

section { color: red; }


Mon titre

Alléchant

section { color: red; }
article { color: blue; }

Mon titre

Alléchant

section { color: red; }
article { color: blue; }
p       { color: green; }

Mon titre

Alléchant


La notion de cascade fait référence aux propriétés CSS qui, lorsqu’elles sont appliquées à un élément HTML, le sont aussi sur tous les enfants par héritage.

Les sélecteurs simples

Sélecteur de type

Pour appliquer une propriété à tous les éléments d’un même type, on indique le nom de l’élément :

/* Appliqué à tous les éléments <p> de la page */
p {
    propriete: valeur;
}

Sélecteur de classe

Pour appliquer une propriété à tous les éléments d’une même classe, on indique le nom de la classe avec un point :

/* Appliqué à tous les éléments
   de classe "recent" */
.recent {
    propriete: valeur;
}
/* Appliqué à tous les articles
   de classe "recent" */
article.recent {
    propriete: valeur;
}

Sélecteur d’identifiant

Pour appliquer une propriété à un élément avec un id spécifique, on indique cet identifiant avec un dièse :

/* Appliqué à l'élément d'identifiant "monId" */
#monId {
    propriete: valeur;
}

Note : un identifiant doit être unique

Sélecteur d’attribut

Pour appliquer une propriété aux élément possédant un attribut donné, on indique son attribut entre crochets :

/* Appliqué aux éléments <p> possédant l'attribut "id" */
p[id] {
    propriete: valeur;
}

Combiner des sélecteurs

Sélecteur de descendants

Pour appliquer des propriétés à tous les descendants B d’un élément A, on utilise la syntaxe A B :

/* Appliqué aux éléments <p> qui sont descendants de <body> */
body p {
    propriete: valeur;
}

Sélecteur d’enfants

Pour appliquer des propriétés aux enfants directs d’un élément, on indique le nom de l’élément et de ses enfants, séparés par un > :

/* Appliqué aux éléments <p> qui sont enfants directs du <body> */
body > p {
    propriete: valeur;
}

Sélecteur de voisin direct

Pour appliquer des propriétés aux éléments B qui sont voisins directs d’éléments A, on utilise la syntaxe A + B :

/* Appliqué aux éléments <p> qui suivent directement un <a> */
a + p {
    propriete: valeur;
}

Sélecteur de voisins généraux

Pour appliquer des propriété aux éléments B qui sont voisins successeurs d’éléments A, on utilise la syntaxe A ~ B :

/* Appliqué aux éléments <p> qui sont voisins en aval d'un <a> */
a ~ p {
    propriete: valeur;
}

Pseudo-classes

Pseudo-classe :first-child

Pour appliquer une propriété à des éléments premier enfant de leur parent, on suffixe le nom de l’enfant avec :first-child :

/* Appliqué à tous les éléments <p> qui sont 1er enfant de leur parent */
p:first-child {
    propriete: valeur;
}

Note : on en déduit le fonctionnement de :last-child.

Pseudo-classe :first-of-type

Pour appliquer une propriété à des éléments premier enfant d’un type donné, on suffixe le nom de l’enfant avec :first-of-type :

/* Appliqué à tous les éléments <p> qui sont le 1er enfant de ce type */
p:first-of-type {
    propriete: valeur;
}

Note : on en déduit le fonctionnement de :last-of-type.

Plus de sélecteurs

Les sélecteurs sont nombreux et les combinaisons infinies. Pour avoir une liste complète des possibilités de sélection offertes par CSS, vous pouvez vous référer à cette doc de Mozilla.


Vous y trouverez entre autre les pseudo-classe ::before et :hover qui seront à utiliser en TP…

Propriétés textuelles et de blocs

Le texte

p {
    font-family: Arial, sans-serif;







}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: "Times New Roman", sans-serif;







}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété font-family indique la police de caractères à utiliser.
  • On peut en proposer plusieurs et c’est alors la 1\(^{ière}\) disponible sur le système hôte qui est utilisée.
  • Il faut toujours indiquer une police par défaut en dernier choix.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;






}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 12px;






}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété font-size permet de modifier la taille du texte.
  • Elle peut utiliser des valeurs absolues ou relatives (voir slide suivante).
p {
    font-family: Arial, sans-serif;
    font-size: 27px;






}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété font-size permet de modifier la taille du texte.
  • Elle peut utiliser des valeurs absolues ou relatives (voir slide suivante).
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;





}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: italic;





}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété font-style modifie l’inclinaison de la police.
  • Elle permet d’écrire en italique.
  • La valeur par défaut est normal.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;




}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;




}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété font-weight modifie l’épaisseur de la police.
  • Elle permet d’écrire en gras.
  • La valeur par défaut est normal.
  • On peut indiquer une épaisseur allant de 1 à 1000.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;



}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;



}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété text-decoration permet de décorer le texte avec une ligne.
  • Elle permet notamment de souligner le texte.
  • La valeur par défaut est none.
  • On peut indiquer une position overline ou line-through.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: right;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété text-align permet de positionner le texte.
  • Elle permet notamment de centrer et justifier.
  • La valeur par défaut est left.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: center;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété text-align permet de positionner le texte.
  • Elle permet notamment de centrer et justifier.
  • La valeur par défaut est left.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: justify;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété text-align permet de positionner le texte.
  • Elle permet notamment de centrer et justifier.
  • La valeur par défaut est left.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1;

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1.5;

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété line-height permet de modifier l’espacement entre les lignes.
  • La valeur par défaut est 1.
  • C’est un facteur, il n’y a pas d’unité.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: .5;

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété line-height permet de modifier l’espacement entre les lignes.
  • La valeur par défaut est 1.
  • C’est un facteur, il n’y a pas d’unité.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1;
    color: black;
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1;
    color: green;
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété color permet de modifier la couleur du texte
  • Elle peut utiliser des couleurs prédéfinies, des valeurs hexadécimales ou encore des triplets RGB.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1;
    color: #7605ee;
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété color permet de modifier la couleur du texte
  • Elle peut utiliser des couleurs prédéfinies, des valeurs hexadécimales ou encore des triplets RGB.
p {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    line-height: 1;
    color: rgb(255,0,190);
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

  • La propriété color permet de modifier la couleur du texte
  • Elle peut utiliser des couleurs prédéfinies, des valeurs hexadécimales ou encore des triplets RGB.

Les bordures

p {
    border: 4px solid black;       

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    border: 4px dotted red;        

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    border: 4px dashed #27E;       

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    border-top: 4px dashed #27E;
    border-bottom: 4px dashed #27E;
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.


  • Un élément HTML possède 4 bordures : haut, droite, bas, gauche
  • Une bordure possède une épaisseur, un style et une couleur.
  • Il est possible de cibler une propriété et/ou un côté

Les arrière-plans

p {
    background-color: none;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    background-color: red;


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    background-image: url('img/icone_CSS.svg');


}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    background-image: url('img/icone_CSS.svg');
    background-repeat: no-repeat;

}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.

p {
    background-image: url('img/icone_CSS.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
}

Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte, Ceci est un paragraphe de texte.


  • Une couleur d’arrière-plan se définie avec background-color
  • Une image d’arrière-plan se définie avec background-image et peut être :
    • répétée ou non avec background-repeat
    • positionnée avec border-position

Les types de boites

Les élément “block”


<section>
    <p> Pas mal </p>
    <p> Surprenant </p>
    <p> Cool </p>
    <p> Génial </p>
</section>

p {
    display: block;
    border: 2px solid black;

}

Pas mal

Surprenant

Cool

Génial

p {
    display: block;
    border: 2px solid black;
    width: 200px;
}

Pas mal

Surprenant

Cool

Génial

Un élément avec la propriété display: block :

  • se place verticalement entre ses deux voisins
  • occupe toute la largeur disponible
  • peut avoir des dimensions

Quelques éléments HTML de type block par défaut : <p>, <section>, <article>, <header>, <nav> ….

Les éléments “inline”

<section>
    <p> Pas mal </p>
    <p> Surprenant </p>
    <p> Cool </p>
    <p> Génial </p>
</section>
p {
    display: inline;
    border: 2px solid black;
    width: 200px;
}

Pas mal

Surprenant

Cool

Génial


Un élément avec la propriété display: inline :

  • se place horizontalement entre ses deux voisins
  • n’occupe que la largeur nécessaire
  • ne peut pas avoir des dimensions

Quelques éléments HTML de type inline par défaut : <a>, <span>, <img>, <input>, <textarea>

Les éléments “inline-block”

<section>
    <p> Pas mal </p>
    <p> Surprenant </p>
    <p> Cool </p>
    <p> Génial </p>
</section>
p {
    display: inline-block;
    border: 2px solid black;
    width: 200px;
}

Pas mal

Surprenant

Cool

Génial


Un élément avec la propriété display: inline-block :

  • se place horizontalement entre ses deux voisins (inline)
  • n’occupe que la largeur nécessaire (inline)
  • peut avoir des dimensions (block)

Il n’existe aucun élément HTML de type inline-block par défaut.

Margin & padding

Padding, espace dans un block

<section>
    <p> Pas mal </p>
    <p> Surprenant </p>
    <p> Cool </p>
    <p> Génial </p>
</section>
p {
    border: 2px solid black;

}

Pas mal

Surprenant

Cool

Génial

p {
    border: 2px solid black;
    padding: 5px;
}

Pas mal

Surprenant

Cool

Génial

p {
    border: 2px solid black;
    padding: 5px 0; /* vertical horizontal */
}

Pas mal

Surprenant

Cool

Génial

p {
    border: 2px solid black;
    padding: 5px 0 10px 30px; /*haut droite bas gauche*/
}

Pas mal

Surprenant

Cool

Génial

La propriété padding définie l’espacement entre le contenu et la bordure d’un bloc.

Margin, espacement entre les blocs

<section>
    <p> Pas mal </p>
    <p> Surprenant </p>
    <p> Cool </p>
    <p> Génial </p>
</section>
section { border: 1px solid black; }
p {
    border: 2px solid black;

}

Pas mal

Surprenant

Cool

Génial

section { border: 1px solid black; }
p {
    border: 2px solid black;
    margin: 10px;
}

Pas mal

Surprenant

Cool

Génial

section { border: 1px solid black; }
p {
    border: 2px solid black;
    margin: 10px 0; /* vertical horizontal */
}

Pas mal

Surprenant

Cool

Génial

section { border: 1px solid black; }
p {
    border: 2px solid black;
    margin: 10px 0 5px 30px; /*haut droite bas gauche*/
}

Pas mal

Surprenant

Cool

Génial

La propriété margin définie l’espacement minimal entre un bloc et son parent/ses voisins.


Attention : les marges se superposent !

Les tailles

En CSS, les tailles peuvent être exprimées en :

Unités absolues
  • en pixels px
  • en cm cm
  • en pouces in
Unités relatives
  • à la taille de la police héritée : em
  • à la taille de la police de l’élément racine <html> : rem
  • à la plus petite/grande taille du viewport : vmin/vmax

Toujours privilégier les tailles relatives.

Les tailles : exemple

body       { font-size:  20px; }
article    { font-size:   2em; } /* 20px * 2 = 40px */
article p  { font-size: .25em; } /* 40px * 0.25 = 10px */
article a  { font-size:  2rem; } /* 20px * 2 = 40px */
article h3 { font-size: 1.5em; } /* 40px * 1.5 60px */


Les jeux :

Medina

lien

Pas mal

Surprenant

Kingdomino

lien

Cool

Flex

Flex, qu’est-ce que c’est ?

Flexbox
(abrégé Flex) C’est une collection de propriétés CSS qui permettent de positionner des éléments HTML en ligne ou en colonne dans un élément parent, en répartissant au mieux l’espace disponible.
Initialisation
Un élément HTML déclare organiser ses enfants directs avec Flex à travers la propriété display :
conteneur {
    display: flex;
}


Note : Les slides suivantes se basent sur le guide de css-tricks.

Conteneur et items

Avec Flex, on considère un élément HTML parent, le conteneur, et tous ses enfants directs, les items.

  • Le conteneur définit des propriétés communes pour placer les items les uns par rapport aux autres
  • Un item peut modifier individuellement des propriétés communes.

Le conteneur : directions

<article class="conteneur">
    <p> Alléchant </p>
    <p> Bazinga </p>
    <p> Cool </p>
    <p> Dément </p>
</article>
.conteneur {
    display: flex;
    flex-direction: row;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    flex-direction: row-reverse;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    flex-direction: column;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    flex-direction: column-reverse;
}

Alléchant

Bazinga

Cool

Dément

On spécifie la direction des items avec flex-direction :

  • row/column pour les avoir en ligne/en colonne.
  • row-reverse/column-reverse pour les avoir en ligne/colonne en ordre inverse.

Le conteneur : wrapping

<article class="conteneur">
    <p> Alléchant </p>
    <p> Bazinga </p>
    <p> Cool </p>
    <p> Dément </p>
    <p> Excellent </p>
    <p> Fantastique </p>
</article>
.conteneur {
    display: flex;
    flex-wrap: no-wrap;
}

Alléchant

Bazinga

Cool

Dément

Excellent

Fantastique

.conteneur {
    display: flex;
    flex-wrap: wrap;
}

Alléchant

Bazinga

Cool

Dément

Excellent

Fantastique

.conteneur {
    display: flex;
    flex-wrap: wrap-reverse;
}

Alléchant

Bazinga

Cool

Dément

Excellent

Fantastique

On décide du comportement en cas de dépassement avec la propriété flex-wrap :

  • no-wrap pour conserver le dépassement.
  • wrap pour un retour à la ligne vers le bas.
  • wrap-reverse pour un retour à la ligne vers le haut.

Le conteneur : espacement

<article class="conteneur">
    <p> Alléchant </p>
    <p> Bazinga </p>
    <p> Cool </p>
    <p> Dément </p>
</article>
.conteneur {
    display: flex;
    justify-content: flex-start;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    justify-content: flex-end;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    justify-content: center;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    justify-content: space-around;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    justify-content: space-between;
}

Alléchant

Bazinga

Cool

Dément

.conteneur {
    display: flex;
    justify-content: space-evenly;
}

Alléchant

Bazinga

Cool

Dément

On répartit l’espace libre dans le conteneur avec justify-content :

  • flex-start/flex-end \(\rightarrow\) tout au début/à la fin.
  • center \(\rightarrow\) divisé entre début et fin.
  • space-around \(\rightarrow\) autant avant/après chaque élément.
  • space-between \(\rightarrow\) répartition entre les éléments (pas début/fin).
  • space-evenly \(\rightarrow\) répartition entre les éléments + début/fin.

Le conteneur : alignement

<article class="conteneur">
  <p> Alléchant <br> Allaise </p>
  <p> Bazinga </p>
  <p> Cool <br> Chanmé </p>
  <p> Dément </p>
</article>
.conteneur {
    display: flex;
    align-items: flex-start;
}

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur {
    display: flex;
    align-items: flex-end;
}

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur {
    display: flex;
    align-items: center;
}

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur {
    display: flex;
    align-items: stretch;
}

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur {
    display: flex;
    align-items: baseline;
}

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

On aligne les items dans la direction secondaire avec align-items :

  • flex-start/flex-end \(\rightarrow\) selon le début/la fin des items
  • center \(\rightarrow\) selon le centre des items.
  • stretch \(\rightarrow\) pour étier au maximum les items.
  • baseline \(\rightarrow\) selon le texte contenu dans les items.

Les items : ordre

<article class="conteneur">
    <p> 1 - Alléchant </p>
    <p> 2 - Bazinga </p>
    <p> 3 - Cool </p>
    <p> 4 - Dément </p>
</article>


.conteneur p:first-child  { order: 1; }
.conteneur p:nth-child(2) { order: 2; }
.conteneur p:nth-child(3) { order: 20; }
.conteneur p:last-child   { order: 99; }

1 - Alléchant

2 - Bazinga

3 - Cool

4 - Dément

.conteneur p:first-child  { order: 3; }
.conteneur p:nth-child(2) { order: 1; }
.conteneur p:nth-child(3) { order: 4; }
.conteneur p:last-child   { order: 2; }

1 - Alléchant

2 - Bazinga

3 - Cool

4 - Dément

.conteneur p:first-child  { order: 0; }
.conteneur p:nth-child(2) { order: 1; }
.conteneur p:nth-child(3) { order: 0; }
.conteneur p:last-child   { order: -1; }

1 - Alléchant

2 - Bazinga

3 - Cool

4 - Dément

L’ordre des item peut être modifié en associant un numéro aux items avec la propriété order :

  • tous les items ont par défaut un ordre de 0.
  • si deux items ont le même ordre, il sont placés dans l’ordre d’apparition. dans le code HTML.
  • les valeur négatives sont permises.

Les items : s’élargir

<article class="conteneur">
    <p>Alléchant </p>
    <p>Bazinga </p>
    <p>Cool </p>
    <p>Dément </p>
</article>
.conteneur p:first-child  { flex-grow: 0; }
.conteneur p:nth-child(2) { flex-grow: 0; }
.conteneur p:nth-child(3) { flex-grow: 0; }
.conteneur p:last-child   { flex-grow: 0; }

Alléchant

Bazinga

Cool

Dément

.conteneur p:first-child  { flex-grow: 1; }
.conteneur p:nth-child(2) { flex-grow: 0; }
.conteneur p:nth-child(3) { flex-grow: 0; }
.conteneur p:last-child   { flex-grow: 0; }

Alléchant

Bazinga

Cool

Dément

.conteneur p:first-child  { flex-grow: 1; }
.conteneur p:nth-child(2) { flex-grow: 0; }
.conteneur p:nth-child(3) { flex-grow: 0; }
.conteneur p:last-child   { flex-grow: 1; }

Alléchant

Bazinga

Cool

Dément

.conteneur p:first-child  { flex-grow: 1; }
.conteneur p:nth-child(2) { flex-grow: 1; }
.conteneur p:nth-child(3) { flex-grow: 1; }
.conteneur p:last-child   { flex-grow: 1; }

Alléchant

Bazinga

Cool

Dément

.conteneur p:first-child  { flex-grow: 3; }
.conteneur p:nth-child(2) { flex-grow: 1; }
.conteneur p:nth-child(3) { flex-grow: 1; }
.conteneur p:last-child   { flex-grow: 1; }

Alléchant

Bazinga

Cool

Dément

La capacité d’un item à s’élargir est contrôlée avec flex-grow :

  • par défaut elle vaut 0, un item ne s’élargit pas.
  • avec la même valeur > 0, l’espace est réparti équitablement.
  • la proportion d’espace alloué à un item est égal à sa valeur de flex-grow divisée par la somme de tous les flex-grow.

Les items : se contracter

<article class="conteneur">
    <p> A l l é c h a n t </p>
    <p> B a z i n g a </p>
    <p> C o o l </p>
    <p> D é m e n t </p>
    <p> E x c e l l e n t </p>
</article>
.conteneur p:first-child  { flex-shrink: 0; }
.conteneur p:nth-child(2) { flex-shrink: 0; }
.conteneur p:nth-child(3) { flex-shrink: 0; }
.conteneur p:nth-child(4) { flex-shrink: 0; }
.conteneur p:last-child   { flex-shrink: 0; }

A l l é c h a n t

B a z i n g a

C o o l

D é m e n t

E x c e l l e n t

.conteneur p:first-child  { flex-shrink: 1; }
.conteneur p:nth-child(2) { flex-shrink: 1; }
.conteneur p:nth-child(3) { flex-shrink: 0; }
.conteneur p:nth-child(3) { flex-shrink: 0; }
.conteneur p:last-child   { flex-shrink: 0; }

A l l é c h a n t

B a z i n g a

C o o l

D é m e n t

E x c e l l e n t

.conteneur p:first-child  { flex-shrink: 1; }
.conteneur p:nth-child(2) { flex-shrink: 1; }
.conteneur p:nth-child(3) { flex-shrink: 0; }
.conteneur p:nth-child(4) { flex-shrink: 0; }
.conteneur p:last-child   { flex-shrink: 1; }

A l l é c h a n t

B a z i n g a

C o o l

D é m e n t

E x c e l l e n t

.conteneur p:first-child  { flex-shrink: 1; }
.conteneur p:nth-child(2) { flex-shrink: 1; }
.conteneur p:nth-child(3) { flex-shrink: 1; }
.conteneur p:nth-child(4) { flex-shrink: 1; }
.conteneur p:last-child   { flex-shrink: 1; }

A l l é c h a n t

B a z i n g a

C o o l

D é m e n t

E x c e l l e n t

La capacité d’un item à se contracter est contrôlée avec flex-shrink :

  • par défaut elle vaut 1, un item se contracte s’il le peut.
  • 0 indique que l’item ne se contractera pas : il dépassera.
  • la contraction est appliquée équitablement entre items.

Les items : alignement individuel

<article class="conteneur">
  <p> Alléchant <br> Allaise </p>
  <p> Bazinga </p>
  <p> Cool <br> Chanmé </p>
  <p> Dément </p>
</article>

.conteneur               { align-items: flex-start; }
.conteneur p:first-child  { align-self: flex-start; }
.conteneur p:nth-child(2) { align-self: flex-start; }
.conteneur p:nth-child(3) { align-self: flex-start; }
.conteneur p:last-child   { align-self: flex-start; }

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur               { align-items: flex-start; }
.conteneur p:first-child  { align-self: flex-start; }
.conteneur p:nth-child(2) { align-self: flex-start; }
.conteneur p:nth-child(3) { align-self: flex-start; }
.conteneur p:last-child   { align-self: flex-end; }

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur               { align-items: flex-start; }
.conteneur p:first-child  { align-self: flex-start; }
.conteneur p:nth-child(2) { align-self: flex-start; }
.conteneur p:nth-child(3) { align-self: flex-start; }
.conteneur p:last-child   { align-self: center; }

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur               { align-items: flex-start; }
.conteneur p:first-child  { align-self: flex-start; }
.conteneur p:nth-child(2) { align-self: flex-start; }
.conteneur p:nth-child(3) { align-self: flex-start; }
.conteneur p:last-child   { align-self: baseline; }

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

.conteneur               { align-items: flex-start; }
.conteneur p:first-child  { align-self: flex-start; }
.conteneur p:nth-child(2) { align-self: flex-start; }
.conteneur p:nth-child(3) { align-self: flex-start; }
.conteneur p:last-child   { align-self: stretch; }

Alléchant
Allaise

Bazinga

Cool
Chanmé

Dément

  • Pour aligner un item différemment de la consigne align-items de son conteneur, on utilise align-self.
  • Les valeurs possibles sont les mêmes que pour align-items.