Flexbox CSS3
Flexbox CSS3 : suivez le guide !
Nouveautés de la mise en page CSS avec Flexbox

Qu’est-ce que le modèle Flexbox CSS3 ?

Pour créer une disposition flex, il suffit d’ajouter la propriété CSS suivante au conteneur parent : .container {display: flex;} Cette ligne de code CSS3, qui est le cœur de la disposition Flexbox, aura pour effet d’aligner en CSS les enfants du bloc conteneur les uns à côté des autres. Si vous voulez changer d’axe et empiler verticalement les blocs, il suffit d’ajouter la propriété Flexbox CSS flex-direction, comme suit : .container {display: flex; flex-direction: column;} D’autres valeurs CSS peuvent être associées à la propriété CSS3 justify-center : flex- (par défaut) : les items sont regroupés en début de ligne flex-end : les éléments sont regroupés en fin de ligne space-between : les blocs sont sur la ligne, le premier étant collé du côté gauche et le dernier, du côté droit space-around : les éléments sont répartis sur la ligne avec un espacement égal autour de chacun

Les items et l’axe secondaire

Avec la commande CSS align-items, nous pouvons changer le placement des éléments sur l’axe secondaire, il peut alors prendre les valeurs suivantes : flex-start : l'élément est placé au début flex-end : l’élément est placé à la fin center : les blocs sont centrés baseline : les blocs sont alignés sur leur ligne de base (comme flex-start) stretch (par défaut) : les items sont étirés jusqu'à remplir le container (tout en respectant min-width/max-width) La propriété CSS flex-direction étblit l’axe principal et possède plusieurs valeurs : Row (valeur par défaut) : de gauche à droite (si la lecture se fait dans ce sens) Row-reverse : inverse le sens Colum : comme row mais du haut vers le bas Column-reverse : comme row-reverse mais du bas vers le haut

Justification et alignement des éléments Flexbox en CSS

Pour mieux comprendre le positionnement en CSS3 des éléments avec Flexbox, il faut bien comprendre qu’il y a 2 axes : un axe principal et un secondaire. L’axe principal est celui sur lequel sont disposés les éléments : admettons que les blocs sont disposés verticalement, alors l’axe primaire est vertical et l’axe secondaire est horizontal … et vice versa. La propriété CSS3 justify-content permet d’aligner les éléments le long de l’axe principal, le code ci-après permettant par exemple de centrer les éléments : .container {display: flex; flex-direction: row; justify-content: center;}

Commentaires

Contactez Nous

Quel Est Votre Message?