Article original : Learn CSS Flexbox for Beginners [Free 2-hour course]

Flexbox est une fonctionnalité CSS puissante qui vous permet de créer des interfaces utilisateur s'adaptant à n'importe quelle taille d'écran. freeCodeCamp vient de publier un cours Flexbox pour débutants où vous apprendrez les concepts et la syntaxe du code en construisant votre propre barre de navigation de site web.

Si vous avez déjà eu du mal à centrer un élément avec CSS ou essayé d'aligner correctement des colonnes, Flexbox simplifie cela considérablement. Avec seulement quelques propriétés, vous pouvez créer des mises en page modernes qui s'adaptent (« flex ») à différentes tailles d'écran, sans avoir besoin d'écrire une multitude de media queries personnalisées.

Le développeur et enseignant Indra (CodeWithIndra) vous guidera à travers chaque propriété Flexbox étape par étape. Vous apprendrez à aligner des éléments le long de l'axe principal et de l'axe transversal, à réordonner les éléments sans modifier le HTML, à contrôler la façon dont les éléments s'agrandissent et se réduisent, et enfin à comprendre ce que font réellement flex-grow, flex-shrink et flex-basis. Il montre également des exemples concrets provenant de sites comme GitHub et DataDog, puis démontre comment recréer des parties de leur mise en page.

Le cours se termine par deux petits projets : centrer un élément verticalement et horizontalement (ce que tout le monde finit par chercher sur Google à un moment donné) et construire une barre de navigation propre en utilisant uniquement Flexbox.

Si vous souhaitez améliorer vos compétences en développement front-end, ce cours est un excellent moyen d'investir quelques heures de votre week-end. [Cours YouTube de 2 heures] :