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 >