Web Statique

FlexBox
 FlexBox c’est quoi ?

Flexbox est une méthode de mise en page selon un axe

principal, permettant de disposer des éléments en ligne ou en
colonne. Les éléments se dilatent ou se rétractent pour occuper
l'espace disponible.
 Pourquoi Flexbox ?

Avant l’insertion de la méthode Flexbox, il existait quatre modes de mise en page :

 Block, pour les sections d'une page Web
 Inline, pour le texte
 Tableau, pour les données de tableau à deux dimensions
 Position, pour la position explicite d'un élément

La méthode Flexbox facilite la structuration et la mise en page souple et réactive,

sans utiliser les marges et le positionnement.
La page est décomposée en un agencement de boites qui peuvent se suivre (boites
voisines ) et s'imbriquer (boites ancêtres).
En définissant les tailles et les interactions entre les différentes boîtes, on obtient
une adaptation automatique des éléments de la page lorsqu'elle est redimensionnée
 Comment utiliser Flexbox ?

Le conteneur flex (flex container) ou bien la boite dite « parent », contient les
éléments flex (flex items) ou bien les boites « enfants ».

L'idée est définir, en utilisant les différentes propriétés CSS, l'ordre des "boites
enfants" dans la "boite parent".
 Définir le conteneur flex (flex container)

Le conteneur (container) est une balise html qui contient d'autres balises html.

Dans l'exemple ci-dessous, La conteneur correspond à la balise <div> pour

laquelle on a défini la classe « .conteneur".

Cette balise <div> contient deux balises <div> et une balise <figure>. Ces
dernières deviennent alors des "éléments flex" (flex items) mis en évidence ici par la
classe ".element".
 Définir le conteneur flex (flex container)

La boite se transforme en "conteneur flex" dès lors qu'on lui attribue la propriété
CSS "flex"comme montré dans le code CSS suivant :
 Définir le conteneur flex (flex container)

Les propriétés du conteneur flex sont :

 flex-direction

 flex-wrap

 flex-flow

 justify-content

 align-items

 align-content
 Définir les axes du conteneur flex

Axe principal : main axis

Le conteneur flex possède un axe principal (main axis) sur lequel les éléments flex peuvent
se suivre.

L’axe principal est défini par la propriété flex-direction qui peut prendre les valeurs
suivantes:

row : les éléments flex se suivent sur une ligne,

row-reverse : les éléments flex se suivent sur une ligne en ordre inversé.

column : les éléments flex se suivent sur une colonne.

column-reverse : les éléments flex se suivent sur une colonne en ordre inversé
 Définir les axes du conteneur flex

Axe secondaire : cross axis

Le choix de l'axe principal impose la direction de l'axe secondaire (cross axis) qui lui est
toujours perpendiculaire.

Le choix des axes est essentiel car leur orientation va déterminer le résultat de l'application
 La propriété flex-direction

La propriété flex-direction définit dans quelle direction le

conteneur souhaite empiler les éléments flexibles.
 La propriété flex-direction

La valeur row empile les

éléments flexibles horizontalement
(de gauche à droite)
 La propriété flex-direction

La valeur row-reverse empile les

éléments flexibles horizontalement
(mais de droite à gauche) :
 La propriété flex-direction

La valeur column empile les

éléments flexibles verticalement (de
haut en bas) :
 La propriété flex-direction

La valeur column-reverse empile

les éléments flexibles verticalement
(mais de bas en haut) :
 La propriété flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la
place, quitte à "s'écraser", et provoquer parfois des anomalies dans la mise en
page (certains éléments pouvant dépasser de leur conteneur). Si vous voulez,
vous pouvez demander à ce que les blocs retournent à la ligne lorsqu'ils n'ont
plus la place, avec flex-wrap.
La propriété "flex-wrap" peut prendre les valeurs suivantes :

 flex-wrap : nowrap

 flex-wrap : wrap

 flex-wrap : wrap-reverse
 La propriété flex-wrap

flex-wrap : nowrap : c’est la valeur initiale. Si les éléments flexibles sont trop
larges pour tenir dans leur conteneur, ils débordent du conteneur
 La propriété flex-wrap

flex-wrap : wrap : si les éléments flexibles sont trop larges pour tenir dans le
conteneur, ils passent automatiquement sur la ligne suivante (du haut vers le
bas)
 La propriété flex-wrap

flex-wrap : wrap-reverse : si les éléments flexibles sont trop larges pour le

conteneur, ils passent automatiquement sur la ligne suivante (du bas vers le
haut)
La propriété de flex-flow

Le flex-flow est une propriété abrégée pour fixer à la fois la proprieté

flex-direction et la proprieté flex-wrap. Elle peut, par exemple, prendre les
valeurs "row wrap" ou "column wrap".
 Les propriétés d alignement sur l’axe principal

La propriété "justify-content" permet d'aligner les éléments le long de l'axe

principal dans la direction définie par "flex-direction".

Les valeurs de la propriété "justify-content" : flex-start, flex-end, center,

space-around, space-between et space-evenly.
 Les propriétés d alignement sur l’axe principal

justify-content : center : les éléments flexibles sont centrés le long de l'axe

principal.
 Les propriétés d alignement sur l’axe principal

justify-content : flex-start : les éléments flexibles sont placés à partir de la

ligne de début du conteneur sur l'axe principal.
 Les propriétés d alignement sur l’axe principal

justify-content : flex-end : les éléments flexibles sont placés à partir de la

ligne de fin du conteneur sur l'axe principal.
 Les propriétés d alignement sur l’axe principal

justify-content : space-around : l'espace disponible est réparti de façon

égale entre chaque élément, y compris au début et à la fin.
 Les propriétés d alignement sur l’axe principal

justify-content : space-between : l'espace disponible est réparti de façon

égale entre chaque élément.
 Les propriétés d alignement sur l’axe principal

justify-content : space-evenly : l'espace disponible est réparti de façon

égale entre chaque élément avec un espace entier au début et à la fin.
 Les propriétés d alignement sur l’axe secondaire

La propriété align-items permet de changer leur alignement sur l'axe

secondaire, grâce aux valeurs :

 stretch:

 flex-start:

 flex-end:

 center:

 baseline:
 Les propriétés d alignement sur l’axe secondaire

align-items : stretch : les éléments flexibles sont étirés le long de l'axe

secondaire.
 Les propriétés d alignement sur l’axe secondaire

align-items : flex-start : les éléments flexibles sont alignés sur la ligne de

début de l'axe secondaire.
 Les propriétés d alignement sur l’axe secondaire

align-items : flex-end : les éléments flexibles sont alignés sur la ligne de fin
de l'axe secondaire.
 Les propriétés d alignement sur l’axe secondaire

align-items : center : les éléments flexibles sont centrés sur la ligne d'axe
secondaire.
 Les propriétés d alignement sur l’axe secondaire

align-items : baseline : les éléments flexibles sont alignés sur leur ligne de
base (les textes sont alignés).
 Les propriétés d alignement sur l’axe secondaire

align-items : baseline : les éléments sont alignés par la ligne de base du

texte.
 Les propriétés des éléments flex

Les propriétés de l'élément flex sont :

 order

 flex-grow

 flex-shrink

 flex-basis

 flex

 align-self
 Les propriétés des éléments flex

La propriété order permet de contrôler l'ordre dans lequel les éléments

apparaissent dans le conteneur flex. Les valeurs possibles de cette propriétés
peuvent être soit des valeurs globales ("inherit", "initial", "unset " ou bien des
valeurs entières positives ou négatives
 Les propriétés des éléments flex

La propriété flex-grow permet de définir l'agrandissement possible d'un élément

proportionnellement aux autres. La valeur de cette propriété est un nombre. Par
exemple, si "flex-grow : 2" pour un élément, il occupera (si possible) deux fois
plus d'espace que les autres
 Les propriétés des éléments flex

La propriété flex-shrink définit la possibilité pour un élément de rétrécir. Cette

propriété accepte uniquement des valeurs positives
 Les propriétés des éléments flex

La propriété flex-basis définit la taille par défaut d'un élément. Elle peut prendre
des valeurs définies (3 em, 20 px, auto), des valeurs globales (inherit, initial,
unset), des valeurs définies par mots-clés (fill, max-content, min-content, fit-
content) ou la valeur "content" qui calcule la taille automatiquement en fonction
du contenu de l'élément
 Les propriétés des éléments flex

La propriété flex est une propriété raccourcie combinant les propriétés "flex-
grow", "flex-shrink" et "flex-basis"
 Les propriétés des éléments flex

La propriété flex est une propriété raccourcie combinant les propriétés "flex-
grow", "flex-shrink" et "flex-basis"
 Les propriétés des éléments flex

La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur

du conteneur flexible.
Exercice
Exercice
Exercice
Exercice
 Exercice

Ecrire le code HTML et les feuilles CSS pour créer la page suivante :
 Exercice

Ecrire le code HTML et les feuilles CSS pour créer la page suivante :