Flex
Le HTML de base est composé d'un conteneur div
qui contient 5 items div
.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Méthode : display : flex
La propriété transforme le conteneur en conteneur flexible, et tous ses enfants directs deviennent des éléments flexibles. Ils s’alignent automatiquement sur une seule ligne.
See the Pen flex-1-base by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : justify-content
Permet de répartir sur l’axe principal (horizontal).
See the Pen flex-2-justify-content by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : flex-basis
Définit la taille de base (largeur) de chaque élément avant application de flex-grow
et flex-shrink
.
See the Pen flex-3-flex-basis by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : flex-wrap
Permet de passer à la ligne si les éléments ne rentrent pas sur une seule ligne.
See the Pen flex-4-flex-wrap by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : align-content
Contrôle l’espacement vertical entre les lignes (quand il y a plusieurs lignes grâce à flex-wrap
).
See the Pen flex-5-align-content by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : align-items
Aligne les éléments à l’intérieur de la ligne, verticalement.
See the Pen flex-6-align-items by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : align-self
Permet de modifier l’alignement vertical d’un seul élément (indépendant des autres).
See the Pen flex-7-align-self by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : flex-grow
Contrôle la capacité d’un élément à grandir pour occuper l’espace disponible.
See the Pen flex-8-flex-grow by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Méthode : flex-shrink
Contrôle la capacité d’un élément à rétrécir quand il n’y a plus assez d’espace.
See the Pen flex-9-flex-shrink by Vincent-Vanneste (@vincent-vanneste) on CodePen.