import { ComponentWithAs } from '@fluentui/react-bindings';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { FlexItem } from './FlexItem';
export interface FlexProps extends UIComponentProps, ChildrenComponentProps {
    /** Defines if container should be inline element. */
    inline?: boolean;
    /** Sets vertical flow direction. */
    column?: boolean;
    /** Allows overflow items to wrap on the next container's line. */
    wrap?: boolean;
    /** Controls items alignment in horizontal direction. */
    hAlign?: 'start' | 'center' | 'end' | 'stretch';
    /** Controls items alignment in vertical direction. */
    vAlign?: 'start' | 'center' | 'end' | 'stretch';
    /** Defines strategy for distributing remaining space between items. */
    space?: 'around' | 'between' | 'evenly';
    /** Defines gap between each two adjacent child items. */
    gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';
    /** Defines container's padding. */
    padding?: 'padding.medium';
    /** Enables debug mode. */
    debug?: boolean;
    /** Orders container to fill all parent's space available. */
    fill?: boolean;
}
export declare type FlexStylesProps = Pick<FlexProps, 'column' | 'debug' | 'fill' | 'gap' | 'hAlign' | 'inline' | 'padding' | 'space' | 'vAlign' | 'wrap'>;
export declare const flexClassName = "ui-flex";
/**
 * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column).
 */
export declare const Flex: ComponentWithAs<'div', FlexProps> & {
    handledProps: (keyof FlexProps)[];
    Item: typeof FlexItem;
};