/// <reference types="react" />
import { BreakpointConfig } from "../../breakpoints";
export interface FlexboxProperties {
    /**
     * The alignment of the `FlexItem` children. Refers to vertical alignment when `direction` is "row", and refers to horizontal alignment when `direction` is "column". Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
     */
    align?: BreakpointConfig<React.CSSProperties["alignItems"]>;
    /**
     * The justification of the `FlexItem` children. Refers to horizontal justification when `direction` is "row", and refers to vertical justification when `direction` is "column". Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
     */
    justify?: BreakpointConfig<React.CSSProperties["justifyContent"]>;
    /**
     * The direction the `FlexItem` children are laid out in. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
     */
    direction?: BreakpointConfig<React.CSSProperties["flexDirection"]>;
    /**
     * How `FlexItem` children should handle wrapping. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
     */
    wrap?: BreakpointConfig<React.CSSProperties["flexWrap"]>;
    /**
     * Specify the gutter size for both column and row in a single value. This will override any value set via the gutterSize property.
     */
    gap?: BreakpointConfig<React.CSSProperties["gap"]>;
}
export declare const flex: (flexProps?: FlexboxProperties) => string;
export declare const flexItem: (flexStrategy: "grow" | "shrink") => string;
export declare const applyFlexItemGutters: (direction: any, gutterSize: any, gap: any) => string | undefined;