Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. CSS - Le Flexbox
  5. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LE FLEXBOX CSS

Introduction au Flexbox

Jusqu’à présent, nous avons étudié différentes techniques et propriétés CSS pour mettre en page et organiser nos différents éléments HTML.

En particulier, nous nous sommes concentrés sur la propriété display et ses différentes valeurs block, inline et inline-block ainsi que sur les propriétés float et position.

Toutes ces techniques fonctionnent mais peuvent parfois se trouver limitées ou créer des comportements inattendus notamment dans les cas où le contenu HTML va varier en taille de manière dynamique ou lorsqu’il faudra gérer l’orientation du terminal comme c’est le cas avec les mobiles aujourd’hui.

Pour répondre à ces problématiques, le CSS a créé un modèle de disposition appelé « Flexible box » (qu’on appelle couramment le FlexBox) qui introduit la nouvelle valeur flex pour la propriété display ainsi que la propriété flex (et toutes ses sous propriétés).

Le flexbox est aujourd’hui l’outil le plus puissant et simple pour créer des structures responsives et flexibles, c’est-à-dire pour positionner et aligner des éléments HTML sans même connaitre leur dimension à priori.

En effet, le Flexbox va nous permettre de gérer précisément :

  • La direction des éléments (en colonne ou en ligne, avec un retour à la ligne ou non) ;
  • L’alignement des éléments selon un axe principal et secondaire ainsi que leur répartition ;
  • L’ordre des éléments ;
  • La place prise par les éléments en fonction de l’espace disponible.
  • Principe de base du Flexbox CSS : conteneur et éléments contenus

    Le Flexbox va fonctionner sur le principe de conteneurs et d’éléments contenus.

    L’idée est simple : nous allons commencer par définir un élément conteneur (qui sera souvent un div) dans lequel nous allons placer les différents éléments que l’on souhaite positionner dans la page et aligner les uns par rapport aux autres.

    Bien évidemment, nous allons pouvoir définir autant de conteneurs dans une page web que l’on souhaite. L’idée ici est que les éléments contenus dans un conteneur vont former un groupe. Nous allons ensuite pouvoir organiser les éléments de manière précise et efficace les uns par rapport aux autres à l’intérieur de chaque groupe.

    Pour faire fonctionner le modèle de FlexBox, nous allons déjà devoir appliquer un display : flex ou éventuellement un display : inline-flex à notre conteneur.

    Les éléments contenus dans notre conteneur deviennent alors automatiquement des éléments de type flex-item (« éléments flexibles »).

    Notez déjà que la différence entre les valeurs flex et inline-flex n’impacte que le conteneur qui se comportera ainsi comme un élément de type block (avec flex) ou inline (avec inline-flex). Cela n’impacte nullement le comportement des éléments contenus qui seront de type flex-item.

    Commençons immédiatement à pratiquer en créant une page HTML avec un div conteneur et des éléments contenus à l’intérieur.

    Un div conteneur, esssential pour créer des flex items

    On applique une couleur de fond différente à nos éléments contenus

    Les div sont des éléments de type block et prennent toute la largeur

    Pour le moment, pas de surprise : comme nos éléments div sont des éléments de type block, ils prennent par défaut toute la place disponible dans leur élément parent (le div class=".c1") et se placent sur une nouvelle ligne, donc les uns en dessous des autres.

    Notez que j’ai ajouté une marge intérieure et une couleur de fond différente pour chaque div contenu dans notre conteneur afin de rendre l’exemple plus visuel et de pouvoir bien les différencier les uns des autres.

    Maintenant, appliquons un display : flex à notre conteneur pour observer le changement de comportement des éléments contenus.

    On applique un display flex à notre conteneur HTML

    Les div contenus sont maintenant des flex items

    Grâce au display : flex du conteneur, les éléments contenus deviennent flexibles (éléments de type flex-item) et vont donc venir se placer à la suite les uns des autres.

    Cependant, ce n’est que le début : maintenant que notre conteneur possède un display : flex et que nos éléments contenus sont flexibles, nous allons pouvoir utiliser les différentes propriétés appartenant au modèle Flexbox pour les organiser de façon précise et puissante.

    Nous allons ici étudier les propriétés suivantes (notez que certaines propriétés vont s’appliquer au conteneur tandis que d’autres vont s’appliquer aux éléments contenus) :

    • Flex-flow (version shorthand des propriétés flex-direction + flex-wrap) ;
    • Justify-content ;
    • Align-items ;
    • Align-self ;
    • Align-content ;
    • Order ;
    • Flex (version shorthand des propriétés flex-grow + flex-shrink + flex-basis).

    Gérer la direction des flex-items avec le Flexbox

    Nous allons déjà pouvoir gérer la direction des éléments de type flex-items, c’est à dire leur sens d’affichage (en ligne ou en colonne) avec la propriété flex-direction.

    Cette propriété peut prendre les valeurs suivantes :

    • Row (valeur par défaut) : les éléments sont organisés horizontalement ;
    • Row-reverse : les éléments sont organisés horizontalement mais dans l’ordre inverse ;
    • Column : les éléments sont organisés verticalement ;
    • Column-reverse : les éléments sont organisés verticalement mais dans l’ordre inverse.

    Nous allons pouvoir appliquer la propriété flex-direction à notre conteneur. Elle va nous servir à déterminer l’axe principal du modèle de Flexbox.

    Reprenons nos pages HTML et CSS et appliquons par exemple un flex-direction : column-reverse à notre conteneur.

    La propriété flex-direction du flexbox gère la direction des flex items

    Résultat de l'application de flex-direction : column reverse

    Comme vous pouvez le constater, nos éléments s’affichent désormais verticalement (c’est-à-dire en colonne) dans l’ordre inverse de leur déclaration en HTML.

    Le modèle de Flexbox nous fournit également la propriété flex-wrap qui va nous permettre de définir si le contenu doit être affiché sur une seule ligne (ou colonne) ou sur plusieurs.

    On va ainsi pouvoir définir si nos flex-items vont avoir le droit de passer à la ligne ou non.

    La propriété flex-wrap peut prendre les valeurs suivantes :

    • Nowrap : les éléments ne peuvent pas passer à la ligne ;
    • Wrap : les éléments peuvent passer à la ligne dans leur ordre naturel de déclaration ;
    • Wrap-reverse : les éléments peuvent passer à la ligne dans l’ordre inverse de leur déclaration.

    Regardez plutôt l’exemple suivant pour bien comprendre l’utilisation que l’on peut faire avec cette propriété :

    La propriété flex-direction : row du flexbox

    Résultat flexbox pour nos flex items de Flex-direction : row

    Ici, j’ai défini un flex-direction : row pour notre conteneur. Les éléments contenus s’afficheront donc à la suite les uns des autres.

    J’ai également défini une largeur de 250px pour chacun de nos éléments à l’intérieur de notre conteneur.

    Par défaut, les éléments flex-items n’ont pas le droit d’aller à la ligne. Ainsi, si j’essaie de modifier la largeur de ma fenêtre, les éléments vont se recadrer à l’intérieur du conteneur jusqu’à finalement dépasser si la somme de leurs contenus devient plus grande que ma fenêtre.

    En appliquant maintenant un flex-wrap : wrap au conteneur, je donne l’autorisation aux éléments flex-items de se positionner sur plusieurs lignes si jamais le conteneur devient trop petit.

    Utilisation de la propriété de flexbox flex-wrap

    Résultat flexbox de l'application de flex-wrap

    Ainsi, grâce à cette propriété, nous sommes certains que notre conteneur englobera toujours ses éléments flex-items et que les éléments conserveront la largeur qu’on leur a définie.

    Notez pour finir que les deux propriétés flex-direction et flex-wrap peuvent être déclarées avec la propriété raccourcie flex-flow.

    La propriété flex-flow va donc prendre donc deux valeurs : la valeur relative à flex-direction en premier puis celle relative à flex-wrap en deuxième.

    Gérer l’alignement avec le Flexbox

    Le Flexbox est un modèle qui nous permet d’organiser et d’aligner nos éléments selon deux axes : un axe principal et un axe secondaire.

    Nous allons pouvoir définir l’organisation des éléments selon l’axe principal des éléments (horizontal ou vertical) avec la propriété justify-content. L’organisation des éléments selon l’axe secondaire va ensuite pouvoir être gérée avec les propriétés align-items, align-self et align-content.

    Notez que l’axe secondaire dépend du choix de l’axe principal. Ainsi, si on décide d’organiser nos éléments de manière horizontale, alors l’axe principal des éléments sera horizontal tandis que l’axe secondaire sera vertical.

    De même, si on décide d’organiser nos éléments de manière verticale, leur axe principal est l’axe vertical tandis que l’axe secondaire sera l’axe horizontal.

    Gérer l’organisation des éléments selon l’axe principal

    La propriété justify-content nous permet de distribuer l’espace entre les éléments notamment lorsque ceux-ci possèdent une taille absolue ou ont atteint leur taille maximale. Cette propriété nous permet également de contrôler l’alignement des éléments lorsque ceux-ci dépassent de leur cadre.

    La propriété justify-content va pouvoir prendre les valeurs suivantes :

    • Flex-start (défaut) : les éléments s’alignent en début de ligne ;
    • Flex-end : les éléments s’alignent en fin de ligne ;
    • Center : les éléments s’alignent au centre ;
    • Space-between : les éléments sont distribués régulièrement sur la ligne avec le premier élément en tout début de ligne et le dernier en toute fin ;
    • Space-around : les éléments sont distribués régulièrement sur la ligne et s’espacent les uns des autres de manière identique (notez que l’espace entre le premier / dernier élément et le bord est deux fois moins grands qu’entre deux éléments) ;
    • Space-evenly : les éléments sont distribués régulièrement sur la ligne et s’espacent les uns des autres et des bords de manière identique.

    Notez que cette propriété va une nouvelle fois s’appliquer au conteneur.

    Testons immédiatement la propriété justify-content de manière pratique. Pour cela, je vais cette fois créer trois conteneurs dans ma page HTML.

    La propriété CSS justify-content du flexbox

    Résultat de l'application de la propriété du flexbox justify-content

    Ici, on crée trois div conteneurs .c1, .c2 et .c3. On définit un axe principal horizontal pour nos deux premiers conteneurs avec flex-direction : row (les flex-items s’aligneront les uns à côté des autres). Pour notre troisième conteneur, on choisit un axe principal vertical avec flex-direction : column (les flex-items s’aligneront les uns en dessous des autres).

    Ensuite, on applique la propriété justify-content à chacun de nos trois conteneurs en donnant une valeur différente à chaque fois.

    Pour notre premier conteneur .c1, on définit un justify-content : center, ce qui signifie que les éléments s’aligneront au centre selon leur axe principal horizontal.

    Pour notre deuxième conteneur .c2, on définit un justify-content : space-around. Ainsi, nos éléments seront distribués de manière régulière selon leur axe principal horizontal avec le même espace entre les éléments et un espace deux fois plus petit entre un élément et un bord.

    Finalement, on applique un justify-content : space-evenly à notre dernier conteneur .c3. Les éléments seront donc distribués de manière régulière avec le même espace entre eux et entre un élément et un bord selon leur axe principal qui est cette fois-ci vertical.

    Gérer l’organisation des éléments selon l’axe secondaire

    La propriété align-items va nous permettre de définir le comportement des éléments le long de leur axe secondaire. Elle possède donc un rôle similaire à la propriété justify-content mais pour l’axe secondaire.

    Cette propriété va également s’appliquer au conteneur et va pouvoir prendre les valeurs suivantes :

    • Stretch (défaut) : les éléments sont étirés sur tout l’axe ;
    • Flex-start : les éléments sont alignés au début de l’axe ;
    • Flex-end : les éléments sont alignés à la fin de l’axe ;
    • Center : les éléments sont centrés par rapport à l’axe ;
    • Baseline : les éléments sont alignés de telle sorte à ce que leurs lignes de base soient alignées les unes par rapport aux autres.

    Illustrons à nouveau cela avec quelques exemples :

    La propriété align-items du flexbox

    Résultat de la propriété align-items du flexbox

    Ici, commencez par noter que nous appliquons la propriété align-items en plus de justify-content. Vous avez parfaitement le droit de faire cela, c’est même l’un des grands avantages du Flexbox.

    On demande donc aux éléments de notre premier conteneur .c1 de s’aligner à partir de la fin de leur axe secondaire en plus de leur alignement par rapport à l’axe principal. Dans ce cas, l’axe secondaire des éléments est l’axe vertical et nos éléments sont par défaut organisés du haut vers le bas. Le bas de l’axe vertical correspond donc à la fin de l’axe. Nos éléments s’alignent donc à partir du bas de notre conteneur en plus de leur alignement principal horizontal.

    Ensuite, nous alignons les éléments de notre conteneur .c2 au centre par rapport à l’axe vertical. Ainsi, ils se placent au milieu (en hauteur) de leur conteneur.

    Finalement, on demande également aux éléments de notre conteneur .c3 de s’aligner au centre selon leur axe secondaire qui est cette fois-ci l’axe horizontal.

    Gérer l’organisation d’un élément particulier selon l’axe secondaire

    Nous allons également pouvoir organiser un élément en particulier grâce à la propriété align-self. Notez que cette propriété sera prioritaire sur align-items.

    La propriété align-self peut prendre les mêmes valeurs que align-items. Elle va s’appliquer à un élément flex-item en particulier et non pas au conteneur. Illustrons son fonctionnement immédiatement :

    Le code HTML pour appliquer align-self

    La propriété align-self du flexbox

    Résultat de la propriété align-self du flexbox

    Ici, on cible le deuxième élément dans notre premier conteneur et on lui applique un align-self : flex-start. Cet élément en particulier se placera donc au début du conteneur selon son axe secondaire, c’est-à-dire l’axe vertical dans le cas présent.

    Gérer l’organisation éléments par ligne selon l’axe secondaire

    Dans le cas où nos flex-items s’affichent sur plusieurs lignes, le Flexbox va également nous permettre de gérer l’organisation de chaque ligne avec la propriété align-content par rapport à l’axe secondaire.

    Notez que cette propriété n’aura aucun effet si notre Flexbox ne contient qu’une ligne.

    La propriété align-content va pouvoir prendre les valeurs suivantes :

    • Stretch (par défaut) : les éléments s’étendent pour prendre toute la place ;
    • Flex-start : les lignes se collent au début du conteneur ;
    • Flex-end : les lignes se collent en fin du conteneur ;
    • Center : les lignes se centrent dans le conteneur ;
    • Space-between : les lignes sont distribuées régulièrement avec la première ligne au début du conteneur et la dernière à la fin de celui-ci ;
    • Space-around : les lignes sont distribuées régulièrement avec le même espace entre chaque ligne.

    Illustrons cela immédiatement avec un exemple. Pour cela, rajoutons des éléments dans notre conteneur ainsi qu’un flex-wrap : wrap afin d’avoir plusieurs lignes dans celui-ci :

    Le code HTML pour la propriété align-content

    La propriété align-content du flexbox

    Résultat de la propriété align-content du flexbox

    Comme vous pouvez le voir, en utilisant align-content : center les lignes sont centrées dans l’axe secondaire (l’axe vertical en l’occurrence) dans leur conteneur.

    En utilisant align-content : flex-end, les lignes se collent en fin de conteneur selon l’axe secondaire (l’axe vertical encore une fois dans notre exemple).

    Centrer des éléments dans un conteneur

    Grâce au Flexbox, nous allons pouvoir centrer très simplement des éléments horizontalement et verticalement.

    Pour cela, il nous suffit de centrer les éléments selon leur axe principal avec la propriété justify-content et selon leur axe secondaire grâce à la propriété align-items.

    Regardez plutôt l’exemple suivant :

    Le flexbox va nous permettre de facilement centrer nos flex items

    On peut très simplement centrer des éléments grâce au Flexbox

    Nous avons centré nos flex items facilement grâce aux propriétés du flexbox

    Gérer l’ordre d’affichage des éléments

    Le Flexbox va nous permettre de choisir quel élément doit apparaitre dans quel ordre au sein d’un conteneur. Pour cela, nous allons utiliser la propriété order que nous allons appliquer aux éléments de type flex-item (et non pas au conteneur).

    La propriété order va prendre un nombre entier en valeur. Ainsi, l’élément avec la valeur la plus basse apparaitra en premier. Notez ici que la valeur par défaut de order est 0.

    Notez également que vous n’êtes pas du tout obligé de donner un order : 0 à l’élément que vous voulez voir s’afficher en premier, un order : 1 au deuxième, etc. Il suffit juste de donner la valeur la plus faible au premier, et d’aller croissant ensuite.

    Illustrons cela avec un exemple :

    Le code HTML support de pour tester la propriété order du flexbox

    Application CSS de la propriété order du flexbox

    Nous avons changé l'ordre d'affichage de nos flex items avec la propriété order du flexbox

    Ici, on donne un order : 3 à notre élément div class="e1", un order : -4 à notre div class="e2" et un order : 1 à notre div class="e3".

    Notre élément div class="e2" possède la valeur la plus faible liée à sa propriété order dans notre conteneur et s’affichera donc en premier, puis ensuite s’afficheront notre élément div class="e3" et enfin notre div class="e1".

    Gérer la flexibilité des éléments avec le Flexbox

    Comme vous devez vous en douter, le Flexbox va également nous permettre de gérer la flexibilité des éléments HTML... d'où le nom de Flexbox !

    La "flexibilité" correspond ici au fait de pouvoir faire grossir ou rétrecir un élément. Nous allons pouvoir faire cela avec la propriété CSS flex, qui est la notation short hand des propriétés flex-grow, flex-shrink et flex-basis.

    Notez déjà que les différentes propriétés que l'on va voir dans cette partie s'appliquent aux flex-items et non pas au conteneur.

    La propriété flex-grow va nous permettre de gérer la capacité d'un élément à grossir pour occuper l'espace restant par rapport aux autres flex-items.

    Cette propriété va prendre un nombre en valeur. Sa valeur par défaut est 0, ce qui signifie que l'espace restant dans le conteneur ne sera pas distribué entre les éléments.

    Si tous les flex-items possèdent un flex-grow : 1, par exemple, alors l'espace restant dans le conteneur sera distribué régulièrement à tous les flex-items. En revanche, si on définit un flex-grow : 2 à l'un des flex-items, alors il absorbera deux fois pus d'espace disponible que les autres.

    Illustrons cela evec un exemple pour bien comprendre :

    Le code HTML support pour notre propriété flex-grow du flexbox

    Application de la propriété CSS flex-grow du flexbo

    Résultat de l'application de la propriété CSS flex-grow du flexbox

    Par défaut, le flex-grow de nos flex-items est réglé sur la valeur 0, ce qui signifie que l'espace restant dans le conteneur n'est pas distribué dans nos flex-items. C'est ce qu'on peut voir avec notre conteneur .c1.

    Dans notre deuxième conteneur .c2, nous attribuons un flex-grow : 1 à tous nos flex-items. L'espace restant dans le conteneur sera donc distirbué également entre tous nos flex-items.

    Enfin, nous attribuons un flex-grow : 1 aux deux premiers flex-items de notre troisième conteneur et un flex-grow : 2 au dernier. Le dernier flex-item absorbera deux fois plus d'espace restant que les deux premiers flex-items.

    La propriété flex-shrink va être la propriété inverse de flex-grow et va gérer la capacité d'un flex-item à rétrécir par rapport aux autres.

    Cette propriété va également prendre un nombre en valeur. Sa valeur par défaut est 1.

    Notez que pour que flex-shrink ait un effet visible, il faut que la somme des tailles par défaut des flex-items dépasse du conteneur.

    Illustrons le fonctionnement de flex-shrink avec un exemple

    Le code HTML support pour notre propriété flex-shrink du flexbox

    Application de la propriété CSS flex-shrink du flexbo

    Résultat de l'application de la propriété CSS flex-shrink du flexbox

    Ici, j'ai appliqué un flex-shrink : 4 au troisième flex-item du troisième conteneur. Celui-ci se réduit donc pour laisser plus de place aux autres flex-items pour qu'ils se rapprochent de la taille définie pour eux.

    La propriété flex-basis permet de définir la taille par défaut d'un élément avant que l'espace restant dans le conteneur ne soit attribué.

    Cette propriété peut prendre une valeur de type taille (20%, 5rem, etc.) ou un mot clef en valeur.

    La valeur par défaut de flex-basis est auto, qui signifie que l'élément obéira aux règles données par les propriétés width et lenght si celles-ci ont été définies.

    Si on attribue la valeur 0 à flex-basis à nos flex-items, alors l'espace autour du contenu des éléments sera réduit au maximum.

    Enfin, flex-basis peut prendre la valeur content qui signifie que la taille des flex-items sera basée sur la taille de leur contenu. Cependant, cette valeur n'est pas encore bien standardisée ni reconnue par les navigateurs donc je vous recommande de l'éviter.

    Regardez les exemples suivants pour bien comprendre :

    Application de la propriété CSS flex-basis du flexbo

    Résultat de l'application de la propriété CSS flex-basis du flexbox

    Enfin, vous devez savoir que les trois propriétés flex-grow, flex-shrink et flex-basis peuvent être abrégées avec leur version shorthand : la propriété flex.

    Les valeurs par défaut de la propriété flex correspondent à celles des propriétés flex-grow, flex-shrink et flex-basis dans cet ordre, à savoir flex : 0 1 auto.

    Chapitre précédent

    Chapitre suivant