A thin wrapper to help make CSS Flexbox simpler and more expressive
npm install @react-css/flexA thin wrapper to help make CSS Flexbox simpler and more expressive




!GitHub package.json version
!npm
!NPM
Installation:
yarn add @react-css/flex
npm install @react-css/flex
Importing:
``typescript`
import Flex from '@react-css/flex'
All components are
s with the React props fully exposed. You can change what is rendered for both and via the as prop:`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 . The supported as values are:-
div
- nav
- main
- aside
- article
- header
- section
- footer`Whilst the type definitions prevent you from using both the short and manual prop for each style, it is not feasible to expand this to stop you from being able to provide more than one of the short props for each style. These were implemented but due to the possible number of combinations (over 5000), TypeScript would not transpile it and the developer experience was poor as VS Code tried to work out the Props via IntelliSense.
To help prevent accidentally doing this, a warning will log if you have provided multiple values that would overlap/contradict.