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 :

anti-sèche

Pen pour s’entraîner

r1d15-log

Flexbox

Hugo 0.26

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

angledQuotes = true
smartypantsQuotesNBSP = true
“R1d15 : Flexbox” a été mise à jour le :
Améliorer cette page