Difficultés avec Flexbox : de la théorie à la pratique

Question

Hier, j'ai bouffé la partie flex avec une énorme prise de note. J'ai compris l'ensemble durant la partie "théorique" mais au moment de pratiquer : patatra, je perds la mémoire et mélange un peu les choses.
De base, j'ai voulu tout refaire de A à Z, en faisant même un header, un footer et en mettant la recette et l'image dans une section #recette (plutôt qu'une DIV).
Mais je ne sais pas pourquoi, par défaut mes éléments se mettaient en colonne, pourtant je n'avais pas mis de flex-direction: column; ni d'alignement au centre dans mon CSS.
Ensuite, j'ai voulu aller trop loin, pensant qu'il fallait mettre l'image en "row" puis la liste des ingrédients et les étapes en "column"...
Bref, hier je me suis un peu énervé car bien que j'avais compris globalement flexbox, je n'arrivais pas à obtenir ce que je voulais.
Ce matin, j'ai repris les modules en x2 et j'ai refait l'exercice avec le code fourni et j'ai réussi.
Et j'ai refait un petit exercice complet sur une page, je veux bien ton avis notamment sur l'aspect logique : https://codepen.io/Alexis-R-the-sans/pen/emNVeym
J'ai eu quelques difficultés à cause de l'auto-complétion de VS Code parfois invasive, et lorsque je tapais sur "retour" pour supprimer ses suggestions je supprimais des bouts de code par inadvertance comme { ou > (merci ChatGPT pour la vérification du code).

Louis-Nicolas Leuillet · Accepted Answer

Eh bien dis donc ! Oui parfois c'est un peu embêtant avec les autocomplétions (et encore tu n'as pas activé Copilot - du moins je l'espère).
J'ai regardé ton code, franchement c'est impec !
Ta logique est excellente et tu as bien compris l'intérêt de flexbox pour aligner les éléments sans te prendre la tête.
Tu joues aussi avec les espacements (gap) et c'est idéal avec flexbox.
Dormir aide beaucoup pour bien comprendre les concepts, mais pas besoin de tout savoir par coeur... Et puis tu vas tellement pratiquer avec l'accélérateur que ça rentrera vraiment tout seul.
Bravo pour ta détermination Alexis.
Chapeau !

Difficultés avec Flexbox : de la théorie à la pratique

Formation Apprendre HTML (legacy)