Sha256: 233b57555faca6b79436887cf9208be80651c1815569eaa4634ef19a991ff151
Contents?: true
Size: 1.94 KB
Versions: 20
Compression:
Stored size: 1.94 KB
Contents
import React from 'react'
import { Body, Flex, FlexItem, Title } from '../..'
const FlexWrap = () => {
return (
<>
<Body
text="Resize your browser"
/>
<Title
size={4}
text="Wrap"
/>
<br />
<Flex
className="bg_light"
wrap
>
<FlexItem fixedSize="300px">
{'1'}
</FlexItem>
<FlexItem fixedSize="300px">
{'2'}
</FlexItem>
<FlexItem fixedSize="300px">
{'3'}
</FlexItem>
<FlexItem fixedSize="300px">
{'4'}
</FlexItem>
<FlexItem fixedSize="300px">
{'5'}
</FlexItem>
<FlexItem fixedSize="300px">
{'6'}
</FlexItem>
<FlexItem fixedSize="300px">
{'7'}
</FlexItem>
<FlexItem fixedSize="300px">
{'8'}
</FlexItem>
<FlexItem fixedSize="300px">
{'9'}
</FlexItem>
<FlexItem fixedSize="300px">
{'10'}
</FlexItem>
</Flex>
<br />
<Title
size={4}
text="No Wrap"
/>
<br />
<Flex className="bg_light wide">
<FlexItem fixedSize="300px">
{'1'}
</FlexItem>
<FlexItem fixedSize="300px">
{'2'}
</FlexItem>
<FlexItem fixedSize="300px">
{'3'}
</FlexItem>
<FlexItem fixedSize="300px">
{'4'}
</FlexItem>
<FlexItem fixedSize="300px">
{'5'}
</FlexItem>
<FlexItem fixedSize="300px">
{'6'}
</FlexItem>
<FlexItem fixedSize="300px">
{'7'}
</FlexItem>
<FlexItem fixedSize="300px">
{'8'}
</FlexItem>
<FlexItem fixedSize="300px">
{'9'}
</FlexItem>
<FlexItem fixedSize="300px">
{'10'}
</FlexItem>
</Flex>
</>
)
}
export default FlexWrap
Version data entries
20 entries across 20 versions & 1 rubygems