Flexbox Component for Reactjs. Powered by Styled-Components.
Flexbox is really powerful but it have to write so many css style. Moreover, we have to write a lot of boilerplate code to set the layout of our component for example FBox will turn following boilerplate style to something more sugar!
display: flex;
flex-direction: row;
justify-content: center;
alignItems: center;
padding: 10px;
with FBox you can just write...
<FBox row center alignCenter p="10px">.....</FBox>
npm install --save fbox
import FBox from 'fbox'
...
...
<FBox alignCenter center p="10px">
....Your contents...
</FBox>
Noted: Usually, you will have to use nested FBox together to create a layout.
please check /stories/index.js for example usage. You also use npm run storybook to run the sample on your machine.
Props that is Boolean type you just have to add props name to FBox like this <FBox center alignCenter>...</FBox>
Props that is string type you have to add value to FBox like this <FBox background="red" p="10px" ml="2em">...</FBox>
| Prop Type | Prop Name | Generate CSS |
|---|---|---|
| Boolean | column | flex-direction: column; |
| Boolean | columnReverse | flex-direction: column-reverse; |
| Boolean | row | flex-direction: row; |
| Boolean | rowReverse | flex-direction: row-reverse; |
| Boolean | center | justify-content: column-reverse; |
| Boolean | flexStart | justify-content: column-reverse; |
| Boolean | flexEnd | justify-content: flex-end; |
| Boolean | baseline | justify-content: baseline; |
| Boolean | spaceBetween | justify-content: space-between; |
| Boolean | spaceAround | justify-content: space-around; |
| Boolean | contentCenter | align-content: content-center; |
| Boolean | contentFlexStart | align-content: flex-start; |
| Boolean | contentFlexEnd | align-content: flex-end; |
| Boolean | contentBaseline | align-content: baseline; |
| Boolean | contentSpaceBetween | align-content: space-between; |
| Boolean | contentSpaceAround | align-content: space-around; |
| Boolean | alignCenter | align-items: center; |
| Boolean | alignFlexStart | align-items: flex-start; |
| Boolean | alignFlexEnd | align-items: flex-end; |
| Boolean | alignBaseline | align-items: baseline; |
| Boolean | alignStretch | align-items: stretch; |
| Boolean | selfCenter | align-self: center; |
| Boolean | selfFlexStart | align-self: flex-start; |
| Boolean | selfFlexEnd | align-self: flex-end; |
| Boolean | selfBaseline | align-self: baseline; |
| Boolean | selfStretch | align-self: stretch; |
| Boolean | grow1 | flex-grow: 1; |
| Boolean | grow2 | flex-grow: 2; |
| Boolean | grow3 | flex-grow: 3; |
| Boolean | grow4 | flex-grow: 4; |
| Boolean | grow5 | flex-grow: 5; |
| Boolean | flex1 | flex: 1; |
| Boolean | flex2 | flex: 2; |
| Boolean | flex3 | flex: 3; |
| Boolean | flex4 | flex: 4; |
| Boolean | flex5 | flex: 5; |
| Boolean | shrink1 | flex-shrink: 1; |
| Boolean | shrink2 | flex-shrink: 2; |
| Boolean | shrink3 | flex-shrink: 3; |
| Boolean | shrink4 | flex-shrink: 4; |
| Boolean | shrink5 | flex-shrink: 5; |
| Boolean | wrap | flex-wrap: wrap; |
| Boolean | nowrap | flex-wrap: nowrap; |
| Boolean | wrapReverse | flex-wrap: wrap-reverse; |
| string | background | background: ____; |
| string | width | width: ____; |
| string | height | height: ____; |
| string | p | padding: ____; |
| string | pt | padding-top: ____; |
| string | pr | padding-right: ____; |
| string | pb | padding-bottom: ____; |
| string | pl | padding-left: ____; |
| string | m | margin: ____; |
| string | mt | margin-top: ____; |
| string | mr | margin-right: ____; |
| string | mb | margin-bottom: ____; |
| string | ml | margin-left: ____; |