HN : un playground pour résoudre les difficultés du CSS Flexbox

 (yoavsbg.github.io)
2 points par GN⁺ 2025-01-06 | 1 commentaires | Partager sur WhatsApp

  • Un outil pour expérimenter différentes propriétés flex et comprendre leur impact sur la mise en page

  • Vous pouvez voir les changements en temps réel et copier le CSS généré

  • flex-direction

    • row : aligne les éléments horizontalement
    • column : aligne les éléments verticalement
    • row-reverse : aligne les éléments horizontalement en ordre inverse
    • column-reverse : aligne les éléments verticalement en ordre inverse

  • justify-content

    • flex-start : aligne les éléments au point de départ
    • center : centre les éléments
    • flex-end : aligne les éléments au point d'arrivée
    • space-between : applique un espacement uniforme entre les éléments
    • space-around : applique un espacement uniforme autour des éléments

  • align-items

    • stretch : étire les éléments pour les aligner
    • flex-start : aligne les éléments au point de départ
    • center : centre les éléments
    • flex-end : aligne les éléments au point d'arrivée
    • baseline : aligne les éléments sur leur ligne de base

  • flex-wrap

    • nowrap : place tous les éléments sur une seule ligne
    • wrap : répartit les éléments sur plusieurs lignes
    • wrap-reverse : répartit les éléments sur plusieurs lignes en ordre inverse

  • Exemple de code

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • Auteur

    • Créé par Yoav Sabag
    • Vous pouvez obtenir plus d'informations sur YouTube et GitHub

À lire aussi

1 commentaires

 
GN⁺ 2025-01-06
Avis Hacker News

  • Bien que Flexbox soit simple et assez facile à comprendre, les noms de ses propriétés et de ses valeurs ne sont pas intuitifs

    • Des noms comme justify-content et align-items prêtent à confusion
    • Il faut faire plusieurs essais pour apprendre Flexbox

  • Recommandation de Flexboxfroggy.com et cssgridgarden.com

    • Ces sites sont utiles pour apprendre Flexbox et CSS Grid

  • Recommandation du guide de Josh

    • Il détaille des astuces et des techniques avancées sur Flexbox
    • Il couvre des concepts comme flex-basis, auto margins et min-width

  • Partage de son expérience de création d'un guide interactif similaire

    • Cela aide à rafraîchir la mémoire

  • Il estime que main-axis-arrangement et cross-axis-alignment sont des noms plus faciles à comprendre que justify-content et align-items

  • Il se lamente sur la difficulté à bien utiliser Flexbox

    • Il mentionne que même Flexboxfroggy.com ne lui avait pas vraiment aidé

  • Il souligne qu'il faut des défis intéressants pour pratiquer les layouts CSS

    • ChatGPT peut aider au débogage CSS, mais une compréhension approfondie du CSS reste nécessaire

  • Il trouve la syntaxe de Flexbox et de Grid plutôt descriptive

    • Comprendre le modèle de boîte et utiliser les outils de développement de Firefox aide
    • Flexboxfroggy et cssgridgarden sont utiles pour s'entraîner
    • Il consulte souvent la cheat sheet de CSS-tricks

  • Il rappelle que les propriétés des enfants de Flexbox sont aussi importantes

    • Se concentrer uniquement sur les quatre propriétés du conteneur est limitatif

  • Il a créé une cheat sheet pour référencer les propriétés Flexbox

    • Cela pourrait aussi être utile à d'autres