@workday/canvas-kit-react/dist/es6/layout/lib/utils/flex.js

The parent module that contains all Workday Canvas Kit React components

import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
export const flexStyleFnConfigs = [
    {
        name: 'alignContent',
        properties: ['alignContent'],
        system: 'none',
    },
    {
        name: 'alignItems',
        properties: ['alignItems'],
        system: 'none',
    },
    {
        name: 'display',
        properties: ['display'],
        system: 'none',
    },
    {
        name: 'flexDirection',
        properties: ['flexDirection'],
        system: 'none',
    },
    {
        name: 'flexWrap',
        properties: ['flexWrap'],
        system: 'none',
    },
    {
        name: 'justifyContent',
        properties: ['justifyContent'],
        system: 'none',
    },
    {
        name: 'justifyItems',
        properties: ['justifyItems'],
        system: 'none',
    },
    {
        name: 'gap',
        properties: ['gap'],
        system: 'space',
    },
    {
        name: 'columnGap',
        properties: ['columnGap'],
        system: 'space',
    },
    {
        name: 'rowGap',
        properties: ['rowGap'],
        system: 'space',
    },
];
export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
/**
 * A style prop function that takes component props and returns flexbox styles.
 * If no `FlexStyleProps` are found, it returns an empty object.
 *
 * @example
 * ```tsx
 * const FlexExample = () => (
 *   <Flex justifyContent="center" alignItems="center">
 *     Hello, flex!
 *   </Flex>
 * );
 * ```
 */
export const flex = buildStylePropFn(flexStyleFns);