@commercetools-uikit/spacings-inline

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