@react-css/flex
v2.3.0
Published
A thin wrapper to help make CSS Flexbox simpler and more expressive
Downloads
909
Readme
@react-css/flex
A thin wrapper to help make CSS Flexbox simpler and more expressive
Getting Started
Installation:
yarn add @react-css/flex
npm install @react-css/flex
Importing:
import Flex from '@react-css/flex'
Usage
All components are <div />
s with the React props fully exposed. You can change what is rendered for both <Flex />
and <Flex.Item />
via the as
prop:
<Flex as='main'>
<MyComponent />
</Flex>
Flex
To get a basic Flexbox:
<Flex>
<MyComponent />
</Flex>
Inline
For an inline Flexbox:
<Flex inline>
<MyComponent />
</Flex>
Flex Direction
To modify flex-direction
(with React.CSSProperties
types):
<Flex flexDirection='row'>
<MyComponent />
</Flex>
To simplify, you can use:
<Flex row></Flex> // flex-direction: row;
<Flex rowReverse></Flex> // flex-direction: row-reverse;
<Flex column></Flex> // flex-direction: column;
<Flex columnReverse></Flex> // 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):
<Flex flexWrap='nowrap'>
<MyComponent />
</Flex>
To simplify, you can use:
<Flex wrap></Flex> // flex-wrap: wrap;
<Flex noWrap></Flex> // flex-wrap: nowrap;
<Flex wrapReverse></Flex> // 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):
<Flex justifyContent='center'>
<MyComponent />
</Flex>
To simplify, you can use:
<Flex justifyStart></Flex> // justify-content: flex-start;
<Flex justifyEnd></Flex> // justify-content: flex-end;
<Flex justifyCenter></Flex> // justify-content: center;
<Flex justifySpaceBetween></Flex> // justify-content: space-between;
<Flex justifySpaceAround></Flex> // 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):
<Flex alignItems='baseline'>
<MyComponent />
</Flex>
To simplify, you can use:
<Flex alignItemsStart></Flex> // align-items: flex-start;
<Flex alignItemsEnd></Flex> // align-items: flex-end;
<Flex alignItemsCenter></Flex> // align-items: center;
<Flex alignItemsBaseline></Flex> // align-items: baseline;
<Flex alignItemsStretch></Flex> // 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):
<Flex alignContent='flex-end'>
<MyComponent />
</Flex>
To simplify, you can use:
<Flex alignContentStart></Flex> // align-content: flex-start;
<Flex alignContentEnd></Flex> // align-content: flex-end;
<Flex alignContentCenter></Flex> // align-content: center;
<Flex alignContentSpaceBetween></Flex> // align-content: space-between;
<Flex alignContentSpaceAround></Flex> // align-content: space-around;
<Flex alignContentStretch></Flex> // 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):
<Flex flow='row nowrap'>
<MyComponent />
</Flex>
The React TypeScript definitions (or underlying csstype package) unfortunately adds very little type support for this value.
Flex Items
To help with structuring your components, a Flex Item is also available.
<Flex column alignItemsCenter>
<Flex.Item>
<MyFirstComponent />
</Flex.Item>
<Flex.Item>
<MySecondComponent />
</Flex.Item>
</Flex>
Order
To modify order
(with React.CSSProperties
types):
<Flex>
<Flex.Item order={2}>
<MyComponent />
</Flex>
Flex Grow
To modify flex-grow
(with React.CSSProperties
types):
<Flex>
<Flex.Item grow={5}>
<MyComponent />
</Flex.Item>
</Flex>
Flex Shrink
To modify flex-shrink
(with React.CSSProperties
types):
<Flex>
<Flex.Item shrink={3}>
<MyComponent />
</Flex.Item>
</Flex>
Flex Basis
To modify flex-basis
(with React.CSSProperties
types):
<Flex>
<Flex.Item basis='4em'>
<MyComponent />
</Flex.Item>
</Flex>
Flex (Shorthand)
To modify flex
(with React.CSSProperties
types):
<Flex>
<Flex.Item flex='1 0'>
<MyComponent />
</Flex.Item>
</Flex>
Align Self
To modify align-self
(with React.CSSProperties
types):
<Flex>
<Flex.Item alignSelf='flex-end'>
<MyComponent />
</Flex.Item>
</Flex>
To simplify, you can use:
<Flex.Item alignSelfAuto></Flex.Item> // align-self: auto;
<Flex.Item alignSelfStart></Flex.Item> // align-self: flex-start;
<Flex.Item alignSelfEnd></Flex.Item> // align-self: flex-end;
<Flex.Item alignSelfCenter></Flex.Item> // align-self: center;
<Flex.Item alignSelfBaseline></Flex.Item> // align-self: baseline;
<Flex.Item alignSelfStretch></Flex.Item> // 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
Exposed Props
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.
<Flex column onMouseEnter={onMouseEnter}>
<Flex.Item grow={2}>
<MyComponent />
</Flex.Item>
<Flex.Item alignSelfCenter onClick={handleItemClick}>
<MyComponent />
</Flex.Item>
</Flex>
Style Override
CSS provided via styles
will be applied last, this allows all generated CSS to be overridden.
<Flex
inline // this will get overridden
style={{
display: 'flex', // this will override everything else
}}>
<Flex.Item>
<MyComponent />
</Flex.Item>
</Flex>
Rendering as different elements
If the as
prop is not provided, it will default to a <div />
. The supported as
values are:
div
nav
main
aside
article
header
section
footer
Limitations
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.