Flex

Flex is Box with display: flex and comes with helpful style shorthand. It renders a div element by default.

Import

import
{
Flex
}
from
'@blockstack/ui'
;

Usage

Using the Flex components, here are some helpful shorthand props:

  • flexDirection is direction
  • flexWrap is wrap
  • alignItems is align
  • justifyContent is justify

While you can pass the verbose props, using the shorthand can save you some time.

Preview
Box 1
Box 2
Box 3
Editable example
On this page