#11870 - Note : mini-memo css flex
http://lehollandaisvolant.net/?mode=links&id=20150306222124Le mode flex des éléments HTML est un tout nouveau et permet plein de choses : réarrangement de l’ordre des éléments, changement de disposition (vert/horizontale), positionnement des éléments comme dans un tableau (centré, haut, bas…).
Quelques explications là : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Des exemples ici : http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Mon mémo ajoute quelques trucs rapides.
Prenons 3 éléments HTML : un parent (#A) et deux enfants (#B et #C).
Pour passer en mode flex :
#A { display: flex }
Les enfants n’ont pas besoin d’avoir de CSS particuliers : ils sont déjà en mode flex là.
Le CSS sur les enfants permet juste de modifier le comportement : positionnement, alignement, taille…
Ce que j’utilise le plus c’est pour faire des blocs les uns à côté des autres sans avoir à jongler avec des position, float, des marges, des problèmes inhérent au flottant, et autres hack compliqués. Flex simplifie la vie une fois qu’on a compris la base.
Exemple :
Je veux, sur une seule ligne, un bloc extensible (#B) et un bloc de taille fixe (#C) de 300px placé à droite, sans float :
#B { flex: 1 1 auto; }
#C { flex: 0 0 300px; }
Le 3e paramètre : donne la taille de base d’un objet. "auto" = pas de taille imposée, la boîte est entièrement flexible
Le 1er paramètre : donne le poids d’agrandissement. En cas d’agrandissement du bloc parent (#A), l’élément peut lui aussi s’agrandir. Plus le chiffre est grand, plus son agrandissement sera important, comparé aux autres blocs enfants, et à leurs paramètre flex. En fait, si ce paramètre est 3× plus grand que l’autre enfant, et que le parent libère 40px, il en prendra 3× plus que l’autre (30px VS 10px).
Le 2e paramètre : même chose que le premier, sauf dans le cas d’un rétrécissement du bloc parent. Si le bloc parent se rétrécit, ça permet de dire quel bloc enfant #B ou #C va rétrécit ou lequel va rétrécir le plus et en priorité.
Ici, le bloc #B est entièrement flexible et n’a pas de taille imposée. Le bloc #C est lui non-flexible. C’est donc comme un simple float, sauf qu’on n’a pas à jongler avec des marges ou des problèmes de blocs qui sortent du flux de la page.
Avec flex, je peux toujours utiliser le CSS habituel pour styliser les blocs #B, #C — excepté les dimensions, les positions, les floats, vu que ça entrera en conflit avec flex — comme l’alignement du texte, les hauteurs, les marges (ce que float rend difficile en fait). Si j’augmente la hauteur de #C par exemple, le bloc #A parent sera également agrandi (contrairement à ce qui se passerait avec un float) et le bloc #B pourra être centré verticalement dans #A en face de #C (comme dans un tableau ou avec inline-block, mais avec la flexibilité des tailles en plus, pratique pour le design adaptatif/responsive).
Le CSS sur l'élément parent permet de modifier l'orientation (horizontal ou vertical), ou la position et la disposition de tous les éléments enfants (centrés, espacés...).
Le CSS ajouté sur les éléments enfants permet de modifier la position et la disposition de l'élément visé. On peut ainsi dire que tous les éléments doivent être alignés verticalement en haut, et de dire que l'un d'eux doit être au milieu.