React flexbox layout with intuitive style settings.
There is no fancy compares to other libraries, it is just another way of declaring flexbox layout in react.
Usage
npm install -save aiws-react-flexbox
import {Flex, Box} from 'aiws-react-flexbox';
...
<Flex
justify="center"
align="center"
p={1}
>
<Box
pl={1}
pr={1}
auto
/>
Left
</Box>
<Box
ml={1}
>
Right
</Box>
</Flex>
...
API
Flex
Property
Corresponding CSS
Value
Meaning
column
flex-direction: column/row
true or false
layout content in column or row
reverse
flex-direction: row-reverse/column-reverse
true or false
layout content in reverse order
wrap
flex-wrap
no-wrap or wrap or wrap-reverse
render items in one line or multiple lines or multiple lines with reversed order
justify
justify-content
flex-start or flex-end or center or space-between or space-around
Specify how the items are aligned in the main axis
align
align-items
flex-start or flex-end or center or space-between or space-around
Specify how the items are aligned in the secondary axis
fullWidth
width: 100%
true or false
take the width of the parent
inline
display: inline-flex
col
width: (col * 100 / 12)%
1..12
auto
flex: 1 1 auto
true or false
take all available space of the parent
Box
Property
Corresponding CSS
Value
Meaning
order
order
number
controls the order in which they appear in the flex container
auto
flex: 1 1 auto
true or false
take all available space of the parent
grow
flex-grow:
number
shrink
flex-shrink:
number
basis
flex-basis:
string or number
align
align-self:
auto or flex-start or flex-end or center or baseline or stretch