Inline
Description
If you want to learn more about the spacing components take a look at this article.
Usage
import SpacingsInline from '@commercetools-uikit/spacings-inline';
<SpacingsInline scale="m">
<FlatButton />
<FlatButton />
<FlatButton />
</SpacingsInline>;Using Spacings preset
Inline spacing can be imported and used via spacings preset as well.
import Spacings from '@commercetools-uikit/spacings';
<Spacings.Inline scale="m">
<FlatButton />
<FlatButton />
<FlatButton />
</Spacings.Inline>;Properties
| Props | Type | Required | Values | Default |
|---|---|---|---|---|
scale |
String |
- | ['xs', 's', 'm', 'l', 'xl'] |
s |
alignItems |
oneOf |
- | ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'] |
flex-start |
justifyContent |
oneOf |
- | ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'] |
flex-start |
children |
PropTypes.node |
- | - | - |
If you need to use flex-wrap CSS property, consider using instead the component <Grid />.
Scales
| Scale | Pixel |
|---|---|
| xs | 4 |
| s | 8 |
| m | 16 |
| l | 24 |
| xl | 32 |