Space

Interface of Space
🏗 Coming Soon

<Space /> & <SpaceVertical> are designed to put space between their children. Space operates on the horizontal axis while SpaceVertical operates on the vertical axis.

Space & SpaceVertical Support spacing properties

  • Margin (m, mx, ml, etc...)
  • Padding (p, px, pl, etc...)

Alignment

Space & SpaceVertical support align. Space defaults to center while SpaceVertical defaults to stretch

Gap

Specify the width of the gap between items:

Between

The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge. (citation: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

Around

The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. (citation: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

Evenly

The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. (citation: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

Reverse

Reverse the order of the items in the space.