Description

• Wrapper for flexbox.
• Quick styled-components
• Support tag: div, nav, main, aside, article, header, section, footer

Usage

Install the package

npm install react-flexbox-z

Import the module in the place you want to use:

import Flex from "react-flexbox-z";

Snippet

<Flex as='main'>
  This is a simple
</Flex>

<Flex column alignItemsCenter>
  <Flex.Item>
    This is child
  </Flex.Item>
  ... more
</Flex>

Props

flexbox

// =====================================================
<Flex row />
<Flex column />
<Flex rowReverse /> // flex-direction: row-reverse;
<Flex columnReverse /> // flex-direction: column-reverse;

// wrap
<Flex flexWrap='nowrap' />
<Flex wrap /> // flex-wrap: wrap;
<Flex noWrap /> // flex-wrap: nowrap;
<Flex wrapReverse /> // flex-wrap: wrap-reverse;

// justify
<Flex justifyContent='center' />
<Flex justifyStart /> // justify-content: flex-start;
<Flex justifyEnd /> // justify-content: flex-end;
<Flex justifyCenter /> // justify-content: center;
<Flex justifySpaceBetween /> // justify-content: space-between;
<Flex justifySpaceAround /> // justify-content: space-around;

<Flex alignItems='baseline' />
<Flex alignItemsStart /> // align-items: flex-start;
<Flex alignItemsEnd /> // align-items: flex-end;
<Flex alignItemsCenter /> // align-items: center;
<Flex alignItemsBaseline /> // align-items: baseline;
<Flex alignItemsStretch /> // align-items: stretch;

<Flex alignContent='flex-end' />
<Flex alignContentStart /> // align-content: flex-start;
<Flex alignContentEnd /> // align-content: flex-end;
<Flex alignContentCenter /> // align-content: center;
<Flex alignContentSpaceBetween /> // align-content: space-between;
<Flex alignContentSpaceAround /> // align-content: space-around;
<Flex alignContentStretch /> // align-content: stretch;

flexbox-item

<Flex.Item />
// =====================================================
order, // 'order'
grow, // 'flex-grow'
shrink, // 'flex-shrink'
basis, // 'flex-basis'
flex, // 'flex'
alignSelfAuto, // 'align-self'
alignSelfStart, // align-self: start;
alignSelfEnd, // align-self: end;
alignSelfCenter, // align-self: center;
alignSelfBaseline, // align-self: baseline;
alignSelfStretch, // align-self: stretch;
alignSelf, // 'align-self' manual

Note

See more d.ts

RUN

LIVE EXAMPLE

License

MIT