Sha256: 56bd4d02197adee3673d6cbf2efe2089737316c52078bb7c4bddd2fce50ea781
Contents?: true
Size: 1.72 KB
Versions: 20
Compression:
Stored size: 1.72 KB
Contents
import React from 'react'
import { Flex, FlexItem, Title } from '../..'
const FlexSpacing = () => {
return (
<>
<Title
size={4}
text="None"
/>
<br />
<Flex
className="bg_light"
spacing="none"
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
<br />
<Title
size={4}
text="Around"
/>
<br />
<Flex
className="bg_light"
spacing="around"
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
<br />
<Title
size={4}
text="Between"
/>
<br />
<Flex
className="bg_light"
spacing="between"
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
<br />
<Title
size={4}
text="Evenly"
/>
<br />
<Flex
className="bg_light"
spacing="evenly"
>
<FlexItem>
{'1'}
</FlexItem>
<FlexItem>
{'2'}
</FlexItem>
<FlexItem>
{'3'}
</FlexItem>
<FlexItem>
{'4'}
</FlexItem>
</Flex>
</>
)
}
export default FlexSpacing
Version data entries
20 entries across 20 versions & 1 rubygems