DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[cffl:Using the exercise files]]|[[cffl:Current support]] ->|

==== historique de la mise en page basée sur CSS ====

  - Pas de CSS, que du normal flow
  - Arrivée de CSS, ajoute le support du modèle de boite et des floats
  - Ajout de modèles de positionnement comme absolute et fixed
  - CSS flexible layout box model

=== CSS flexible layout box model ===

Dans le "flex layout model", les enfants d'un **conteneur flex** peuvent être disposé dans n'importe quelle direction, et peuvent ""flex" leur taille, soit en s'agrandissant pour remplir un espace disponible, soit en rétrecissant pour éviter de déborder (//overflow//) l'élément parent.

Aussi bien les alignements horizontaux que verticaux des enfants peuvent être facilement manipulés. Le nesting de ces boites (horizontal dans vertical ou inversement) peuvent être utilisés pour construire une mise en page à deux dimensions.

=== Using Flexbox ===
  - définir un élément comme un "conteneur flex"
  - tous les éléments enfants deviennent des "éléments flex" (//flex items//).
  - Les propriétés Flexbox peuvent alors contrôler l'orientation, l'alignement, la taille et l'espacement des éléments flex enfants.
  - Les conteneurs sont paramétrés avec une orientation soit rang soit colonne. (/!\ important à comprendre).

=== main & cross axis ===