@workday/canvas-kit-react/dist/es6/layout/lib/Flex.d.ts

The parent module that contains all Workday Canvas Kit React components

import { BoxProps } from './Box';
import { FlexStyleProps } from './utils/flex';
export type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
/**
 * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
 * It is highly flexible, and can be used on its own or to build other components.
 * `Flex` is built on top of `Box` and has access to all `BoxProps`.
 *
 * @example
 * ```tsx
 * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
 *
 * interface CardProps extends FlexProps {
 *   // card-specific props
 * }
 *
 * // `Card`'s default values are set using `FlexProps`
 * const Card = (props: CardProps) => (
 *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
 *     <h1>Hello, Card!</h1>
 *     <p>This card uses flexbox to set its layout.</p>
 *   </Flex>
 * );
 * ```
 */
export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<BoxProps, "display"> & FlexStyleProps> & {
    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
};
//# sourceMappingURL=Flex.d.ts.map