111 lines
3.3 KiB
Text
111 lines
3.3 KiB
Text
import { Meta } from '@storybook/blocks';
|
|
import { parameters } from '../../../utils/docsPage.js';
|
|
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
|
import { cssStringToTableArray } from '../../../utils/parseCss';
|
|
import alignContent from '../../../../scss/tokens/layout/flex/_align-content.scss?raw';
|
|
import alignItems from '../../../../scss/tokens/layout/flex/_align-items.scss?raw';
|
|
import alignSelf from '../../../../scss/tokens/layout/flex/_align-self.scss?raw';
|
|
import flexDirection from '../../../../scss/tokens/layout/flex/_flex-direction.scss?raw';
|
|
import flexGrow from '../../../../scss/tokens/layout/flex/_flex-grow.scss?raw';
|
|
import flexShrink from '../../../../scss/tokens/layout/flex/_flex-shrink.scss?raw';
|
|
import flexWrap from '../../../../scss/tokens/layout/flex/_flex-wrap.scss?raw';
|
|
import flex from '../../../../scss/tokens/layout/flex/_flex.scss?raw';
|
|
import justifyContent from '../../../../scss/tokens/layout/flex/_justify-content.scss?raw';
|
|
import justifyItems from '../../../../scss/tokens/layout/flex/_justify-items.scss?raw';
|
|
import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?raw';
|
|
|
|
<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
|
|
|
|
# Flexbox tokens
|
|
|
|
Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent [CSS tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
|
|
|
Our style library provides these flexbox utility classes:
|
|
|
|
<CopyTable
|
|
title="Align content"
|
|
mdnLink="align-content"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(alignContent)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Align items"
|
|
mdnLink="align-items"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(alignItems)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Align self"
|
|
mdnLink="align-self"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(alignSelf)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Flex direction"
|
|
mdnLink="flex-direction"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(flexDirection)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Flex grow"
|
|
mdnLink="flex-grow"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(flexGrow)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Flex shrink"
|
|
mdnLink="flex-shrink"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(flexShrink)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Flex wrap"
|
|
mdnLink="flex-wrap"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(flexWrap)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Flex"
|
|
mdnLink="flex"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(flex)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Justify content"
|
|
mdnLink="justify-content"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(justifyContent)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Justify items"
|
|
mdnLink="justify-items"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(justifyItems)}
|
|
copyable={[true, false]}
|
|
/>
|
|
|
|
<CopyTable
|
|
title="Justify self"
|
|
mdnLink="justify-self"
|
|
header={['Class', 'Properties']}
|
|
body={cssStringToTableArray(justifySelf)}
|
|
copyable={[true, false]}
|
|
/>
|