HTML/Css : Agencer les éléments html facilement grâce au "display flex"

Bonjour et bienvenue dans ce tuto. Nous allons voir comment utiliser l'attribut css "FLEX".

qu'est-ce que "flex" ?

Flex est un attribut css de la propriété "display". A la différence des display inline et block (pour les plus courants), flex permet plus de précision dans le placement d’éléments html.

Nous allons pouvoir placer les éléments enfant suivant 2 axes, nous donnant par défaut 9 positions :

Ce schéma vous donne les différentes positions (basiques) possibles avec flex.

Mise en pratique

Pour tester vous pouvez créer une page html vide sous notepad++ (ou votre éditeur préféré).

Dans la balise body, ajoutez une balise <div id="test">.

Définissez la taille de votre div à width et height 100% et la taille de la div à width et height 20%. Ajoutez un background-color à la div pour la reconnaître.

exemple : https://jsfiddle.net/hgxdwg6q/

Par défaut, la balise body est en display:block

votre div se retrouve alors en haut à gauche de la fenêtre.

La première chose à faire est de passer le display à "flex" (nb: un display se pose sur le parent pour agir sur le positionnement des enfants). Nous allons ensuite utiliser la propriété "flex-flow" pour indiquer si nous voulons aligner les éléments enfants sur une ligne ou une colonne et spécifier si les éléments enfants doivent revenir à la ligne si la place ne suffit pas.

syntaxe :

• flex-flow: row no-wrap
• flex-flow: row wrap
• flex-flow: column no-wrap
• flex-flow: column wrap

Pour agir sur le placement, utilisez "justify-content" et "align-items". Ces propriétés possèdent les mêmes attributs (en voici les principaux) :

• flex-start
• flex-end
• center

deux attributs sont un peu spécifique :

• space-around (aligne les éléments enfant, un espace identique est ajouté entre les éléments ainsi qu'avant le premier et après le dernier)
• space-between (ajoute un espace de taille équivalent entre les éléments mais colle le premier et dernier élément aux bord  du parent)

un petit exemple (jouez avec les propriétés de flex pour vous faire la main) : https://jsfiddle.net/nght044p/

Quelques exemples pour illustrer :

display:flex;

flex-flow:row no-wrap;

justify-content:center;

align-items:center;

display:flex;

flex-flow:row no-wrap;

justify-content:flex-start

align-items:flex-start;

display:flex;

flex-flow:row no-wrap;

justify-content:flex-end;

align-items:center;

Le mot de la fin

Pour bien comprendre le fonctionnement de flex, il est impératif de faire des essais et de tester. D'autres option plus avancées existent.

A vos claviers et bon code =)