Balance Logo
Reckon Design System


WIP: This section is a work in progress.

  • the basics of css layout
  • primitives: what and why
    • when, and when not, to use primitives
  • grid v flex
    • is your layout 1 or 2 dimensional


The flexbox layout model is a simple yet versatile method of laying out components in rows and columns. You can use it to build vertical or horizontal stacks, simple wrapping grids, and more. The Flex component can be used to create flexbox containers, and any Balance component can be used as a child. Flex layouts are also automatically mirrored in right-to-left languages, and can be nested to create more complex layouts.

Learn more

You can learn more about Flex and see more examples on the Flex page. In addition, there are many great resources on the web for learning flexbox.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.