HN Show: Playground para resolver problemas con CSS Flexbox

 (yoavsbg.github.io)
2 puntos por GN⁺ 2025-01-06 | 1 comentarios | Compartir por WhatsApp

  • Una herramienta para experimentar con diferentes propiedades de flex y entender el impacto que tienen en el diseño

  • Permite ver los cambios en tiempo real y copiar el CSS generado

  • flex-direction

    • row: coloca los elementos de forma horizontal
    • column: coloca los elementos de forma vertical
    • row-reverse: coloca los elementos en orden inverso de forma horizontal
    • column-reverse: coloca los elementos en orden inverso de forma vertical

  • justify-content

    • flex-start: alinea los elementos al inicio
    • center: alinea los elementos al centro
    • flex-end: alinea los elementos al final
    • space-between: deja un espacio uniforme entre los elementos
    • space-around: deja un espacio uniforme alrededor de los elementos

  • align-items

    • stretch: alinea los elementos estirándolos
    • flex-start: alinea los elementos al inicio
    • center: alinea los elementos al centro
    • flex-end: alinea los elementos al final
    • baseline: alinea los elementos a la línea base

  • flex-wrap

    • nowrap: coloca los elementos en una sola línea
    • wrap: coloca los elementos en múltiples líneas
    • wrap-reverse: coloca los elementos en múltiples líneas en orden inverso

  • Ejemplo de código

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

  • Autor

    • Creado por Yoav Sabag
    • Puedes encontrar más información en YouTube y GitHub

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-01-06
Comentario de Hacker News

  • Flexbox tiene un lado sencillo y fácil de entender, pero los nombres de propiedades y valores no son intuitivos

    • Los nombres como justify-content y align-items pueden generar confusión
    • Hay que hacer varios intentos para aprender Flexbox

  • Recomienda Flexboxfroggy.com y cssgridgarden.com

    • Estos sitios son útiles para aprender Flexbox y CSS Grid

  • Recomienda la guía de Josh

    • Describe con detalle tips y trucos avanzados de Flexbox
    • Cubre conceptos como flex-basis, auto margins, min-width

  • Comparte su experiencia creando una guía interactiva similar

    • Ayuda a refrescar la memoria

  • Afirma que main-axis-arrangement y cross-axis-alignment son nombres más fáciles de entender que justify-content y align-items

  • Se queja de lo difícil que es usar Flexbox correctamente

    • También menciona que Flexboxfroggy.com no le ayudó

  • Dice que se necesitan retos interesantes para practicar layouts en CSS

    • ChatGPT puede ayudar con la depuración de CSS, pero se necesita una comprensión profunda de CSS

  • Piensa que la sintaxis de Flexbox y Grid es descriptiva

    • Entender el modelo de caja y usar las Firefox DevTools ayuda
    • Flexboxfroggy y cssgridgarden son útiles para practicar
    • Consulta con frecuencia la cheat sheet de CSS-tricks

  • También menciona que las propiedades de los elementos hijos de Flexbox importan

    • Se vuelve limitado tratar solo las cuatro propiedades del contenedor

  • Hizo una cheat sheet para consultar propiedades de Flexbox

    • También puede ser útil para otras personas