Création d'une carte de blog. Modification du comportement de positionnement par défaut à l'aide de flex.

Objectif :
- Identifier l’élément parent contenant à la fois l’image de l’article (`img` avec le nom de classe `post-image`) et les informations de l’article (`div` avec le nom de classe `post-info`).
- Appliquer les propriétés flex à l’élément parent (`div` avec le nom de classe `blog-card`).
- Centrage horizontal des éléments à l’intérieur de la carte.
- S’assurer que les éléments occupent toute la hauteur de la carte.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmxvZy1jYXJkIj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9hNWQ2ZWY1MC1jYmY1LTRhOTUtODlkNC00NzViNzA0Y2Q4MTEvc2VjdGlvbis0K0ZsZXhib3gvc3BhY2VzaGlwLnBuZyIKICAgICAgICB3aWR0aD0iMjAwcHgiCiAgICAgICAgYWx0PSJQb3N0IEltYWdlIgogICAgICAgIGNsYXNzPSJwb3N0LWltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJwb3N0LWluZm8iPgogICAgICAgIDxoMyBjbGFzcz0icG9zdC10aXRsZSI+U3BhY2VjcmFmdDwvaDM+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtbWV0YSI+UG9zdGVkIG9uIEphbnVhcnkgMSwgMjAyMyBieSBQZXRlciBLZXlnZW48L3A+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtZXhjZXJwdCI+U3BhY2UgdmVoaWNsZSBmb3IgY29sb25pemF0aW9uPC9wPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJyZWFkLW1vcmUiPlJlYWQgTW9yZTwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogX19fOwogIGZsZXgtZGlyZWN0aW9uOiBfX187CiAgYWxpZ24taXRlbXM6IF9fXzsKICBqdXN0aWZ5LWNvbnRlbnQ6IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBoZWlnaHQ6IDQwMHB4OwogIHdpZHRoOiA0MDBweDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbjogMCBhdXRvOwp9CgoucG9zdC1pbWFnZSB7CiAgaGVpZ2h0OiBhdXRvOwogIG1heC13aWR0aDogMTAwJTsKICBkaXNwbGF5OiBibG9jazsKfQoKLnBvc3QtaW5mbyB7CiAgcGFkZGluZzogMjBweDsKfQoKLnBvc3QtdGl0bGUgewogIGZvbnQtc2l6ZTogMS41cmVtOwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtbWV0YSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjODg4OwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtZXhjZXJwdCB7CiAgbWFyZ2luOiAwIDAgMjBweCAwOwp9CgoucmVhZC1tb3JlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

- `display: flex;` ne peut être appliqué qu'à l'élément parent.
- La direction de flexion par défaut est la ligne, il est donc nécessaire de la modifier avec la propriété `flex-direction: column;`.
- Pour centrer les éléments horizontalement, utiliser `align-items: center;`.
- Pour espacer les éléments verticalement, utiliser `justify-content: space-between;`.

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwogIGhlaWdodDogNDAwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wb3N0LWltYWdlIHsKICBoZWlnaHQ6IGF1dG87CiAgbWF4LXdpZHRoOiAxMDAlOwogIGRpc3BsYXk6IGJsb2NrOwp9CgoucG9zdC1pbmZvIHsKICBwYWRkaW5nOiAyMHB4Owp9CgoucG9zdC10aXRsZSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1tZXRhIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM4ODg7CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1leGNlcnB0IHsKICBtYXJnaW46IDAgMCAyMHB4IDA7Cn0KCi5yZWFkLW1vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Défi : Créer une Carte de Blog Verticale avec Flexbox