A día de hoy, si utilizas un sistema de espaciado tanto vertical como horizontal, lo más probable es que ese sistema se base en la utilización de margin. Esta es una opción correcta y totalmente válida pero hay una mejor: usar el gap de flex.

Beneficios de utilizar flex

• Un único elemento contenedor el que controla el espaciado en lugar de múltiples.
• El espaciado deja de entenderse como espacio extra hacia algún lado y pasa a entenderse como espacio entre elementos contiguos.
• Por lo anterior, dejan de existir asimetrías estructurales dentro del DOM, donde el primer o último no reciben un tratamiento diferente.
• Utilización de menos divs lo que facilita la lectura estructural de nuestro sitio mientras trabajamos en él.
• Replica la forma de trabajar en Figma con su Auto-Layout.

Index

• The System
  1. Clasificación de clases
     1. Clases básicas
     2. Clases constituyentes
     3. Clases estructurales
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Clases funcionales
        1. Vertical
        2. Horizontal
        3. Padding
        4. Heading
        5. Color
        6. Font Size
        7. Family
        8. Bg
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
        14. Font Styles
  2. Combinación de clases
     1. Combo-classes
     2. Muti-classes
  3. Escalas fundamentales
     1. Escala fundamental de titulares
     2. Escala fundamental de titulares en el Rich Text
     3. Escala fundamental de cuerpo de texto
     4. Escala fundamental de espaciado
  4. Grid
  5. Gap