`tsx



`

$3

To get a basic Flexbox:

`tsx



`

#### Inline

For an inline Flexbox:

`tsx



`

#### Flex Direction

To modify flex-direction _(with React.CSSProperties types)_:

`tsx



`

To simplify, you can use:

`tsx
// flex-direction: row;
// flex-direction: row-reverse;
// flex-direction: column;
// flex-direction: column-reverse;
`

_These are first come first served, in this order. They cannot be used if you have already provided the flexDirection prop. Providing multiple will result in a console warning._

#### Flex Wrap

To modify flex-wrap _(with React.CSSProperties types)_:

`tsx



`

To simplify, you can use:

`tsx
// flex-wrap: wrap;
// flex-wrap: nowrap;
// flex-wrap: wrap-reverse;
`

_These are first come first served, in this order. They cannot be used if you have already provided the flexWrap prop. Providing multiple will result in a console warning._

#### Justify Content

To modify justify-content _(with React.CSSProperties types)_:

`tsx



`

To simplify, you can use:

`tsx
// justify-content: flex-start;
// justify-content: flex-end;
// justify-content: center;
// justify-content: space-between;
// justify-content: space-around;
`

_These are first come first served, in this order. They cannot be used if you have already provided the justifyContent prop. Providing multiple will result in a console warning._

#### Align Items

To modify align-items _(with React.CSSProperties types)_:

`tsx



`

To simplify, you can use:

`tsx
// align-items: flex-start;
// align-items: flex-end;
// align-items: center;
// align-items: baseline;
// align-items: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignItems prop. Providing multiple will result in a console warning._

#### Align Content

To modify align-content _(with React.CSSProperties types)_:

`tsx



`

To simplify, you can use:

`tsx
// align-content: flex-start;
// align-content: flex-end;
// align-content: center;
// align-content: space-between;
// align-content: space-around;
// align-content: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignContent prop. Providing multiple will result in a console warning._

#### Flex Flow (Shorthand)

To modify flex-flow _(with React.CSSProperties types)_:

`tsx



`

_The React TypeScript definitions (or underlying csstype package) unfortunately adds very little type support for this value._

$3

To help with structuring your components, a Flex Item is also available.

`tsx








`

#### Order

To modify order _(with React.CSSProperties types)_:

`tsx




`

#### Flex Grow

To modify flex-grow _(with React.CSSProperties types)_:

`tsx





`

#### Flex Shrink

To modify flex-shrink _(with React.CSSProperties types)_:

`tsx





`

#### Flex Basis

To modify flex-basis _(with React.CSSProperties types)_:

`tsx





`

#### Flex (Shorthand)

To modify flex _(with React.CSSProperties types)_:

`tsx





`

#### Align Self

To modify align-self _(with React.CSSProperties types)_:

`tsx





`

To simplify, you can use:

`tsx
// align-self: auto;
// align-self: flex-start;
// align-self: flex-end;
// align-self: center;
// align-self: baseline;
// align-self: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignSelf prop. Providing multiple will result in a console warning._

Notes

$3

All the React div props and TypeScript definitions are exposed/passed through. This allows for an identical development experience whilst being able to ignore any Flexbox related CSS.

`tsx








`

$3

CSS provided via styles will be applied last, this allows all generated CSS to be overridden.

`tsx
inline // this will get overridden
style={{
display: 'flex', // this will override everything else
}}>




`

$3

If the as prop is not provided, it will default to a