Today, if you use both a vertical and horizontal spacing system, that system is most likely based on the use of margin. This is a completely valid and correct option, but there is a better one: use the gap of flex.

Benefits of using flex

• A single container element that controls the spacing instead of multiple.
• Spacing is no longer understood as extra space to one side and is now understood as space between contiguous elements. Said another way, the need for adding margins between everything and trying to control it that way ceases to exist.
• Due to the above, structural asymmetries cease to exist within the DOM, where the first or last do not receive a different treatment.
• Use of fewer divs which facilitates the structural reading of our site while we work on it.
• Replicates the way of working in Figma with its Auto-Layout.

Remove this Note

I need to add more video examples of this relatively new example

https://www.youtube.com/watch?v=VvqyUUROmJw

Index

• Forward Slash
  1. What is Forward Slash?
  2. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Color
        5. Bg
        6. Heading
        7. Font Size
        8. Font Style
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
  3. Class combination
     1. Combo-classes
     2. Multi-classes
  4. Grid
  5. Gap
  6. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  7. What’s New?

Prev

<aside> ⬅️ The Grid: global column system of only one class

</aside>

Next

<aside> ➡️ Foundational scales

</aside>