R1d15 : Flexbox

Flexbox et la « Pensée conteneur »

Achevé la « grosse section » Flexbox (toujours accompagné par l’excellent tutoriel HTML/CSS de Todd Mc Leod). Compris le concept et l’importance de l’axe principal et de l’axe secondaire. Certaines propriétés fonctionnent uniquement sur l’axe principal, ou l’axe secondaire. Un paquet de connaissance à assimiler et pratiquer. Le guide CSS-tricks, le fascicule de Joni Trythall et le jeu du flexbox-froggy m’accompagneront ces prochains jours pour pratiquer ces nouvelles propriétés :

1. Propriétés du conteneur

   1. Flex-direction
   2. Flex-wrap
   3. Justify-content (axe principal)
   4. Align-items (axe secondaire)
   5. Align-content (axe secondaire)
      

2. Propriétés des éléments

   1. Align-self
   2. Order
   3. Flex-grow
   4. Flex-shrink
   5. Flex-basis
   6. Flex (0 1 auto)

Ressources flex

Les ressources que je conserve à portée de main :

• A complete guide to flexbox - Chris Coyier
  
• Mise en page avec flexbox - Openclassrooms
• et pour finir l’excellent ouvrage « A field Guide To FlexBox » avec son anti-sèche par Joni Trythall

Pen pour s’entraîner

r1d15-log

Flexbox

• 14 pages d’exercices par Todd McLeod
• 24 pages du jeu Flexbox Froggy.

Hugo 0.26

Mise à jour motorisation Hugo 0.26.. Modifié config.toml pour activer les « guillemets en français »

angledQuotes = true
smartypantsQuotesNBSP = true