CSS : Flexbox

CSS : Flexbox

  • display: flex;

Pas de fusion de marge

  • flex-direction : row (default) || row-reverse || column || column-reverse
row : Les éléments sont disposés dans la même direction que le texte.
row-reverse : Les éléments sont disposés dans la direction opposée au texte.
column : Les éléments sont disposés de haut en bas.
column-reverse : Les éléments sont disposés de bas en haut.
  • justify-content : flex-start (default) || flex-end || center || space-between || space-around
flex-start : Les éléments s'alignent au côté gauche du conteneur.
flex-end : Les éléments s'alignent au côté droit du conteneur.
center : Les éléments s'alignent au centre du conteneur.
space-between : Les éléments s'affichent avec un espace égal entre eux.
space-around : Les éléments s'affichent avec un espacement égal à l'entour d'eux.
  • align-items : stretch (default) || flex-start || flex-end || center || baseline
flex-start : Les éléments s'alignent au haut du conteneur.
flex-end : Les éléments s'alignent au bas du conteneur.
center : Les éléments s'alignent au centre vertical du conteneur.
baseline : Les éléments s'alignent à la ligne de base du conteneur.
stretch : Les éléments sont étirés pour s'adapter au conteneur.
  • order : < interger > (... , -1, 0 (default), 1, ...)
.element:nth-child(1)
{
    order: 3;
}
  • align-self : stretch || flex-start || flex-end || center || baseline

  • flex-wrap : flex-wrap (default) || wrap || wrap-reverse

nowrap : Tous les éléments sont tenus sur une seule ligne.
wrap : Les éléments s'enveloppent sur plusieurs lignes au besoin.
wrap-reverse : Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé.
  • flex-flow : < flex-direction > < flex-wrap >

  • align-content : stretch (default) || flex-start || flex-end || center || space-between || space-around

flex-start : Les lignes sont amassées dans le haut du conteneur.
flex-end: Les lignes sont amassées dans le bas du conteneur.
center : Les lignes sont amassées dans le centre vertical du conteneur.
space-between : Les lignes s'affichent avec un espace égal entre eux.
space-around : Les lignes s'affichent avec un espace égal autour d'eux.
stretch : Les lignes sont étirées pour s'adapter au conteneur.
  • flex-grow : < integer > 0 (default)

Distribue l'espace restant pour la taille des éléments ciblé

  • Prend tout l'espace restant pour la taille de l'élément
.element:nth-child(1) { : 
    flex-grow : 1; 
}
  • L'espace restant est divisé en 11 parts
.element:nth-child(2) { : 
    flex-grow : 10; 
}

Soit 1 part d'espace pour le 1er élément et 10 parts d'espace pour le 2ème élément

  • flex-shrink: < integer > 0 (default)

  • La taille ne va pas être réduite

.element:nth-child(1) { : 
    flex-shrink : 0; 
}
  • La taille va être réduite 10 fois moins
.element:nth-child(1) { : 
    flex-shrink : 10; 
}
  • flex : < flex-grow > < flex-shrink >