Interface LayoutProps

Types for layout related CSS properties

interface LayoutProps {
    aspectRatio?: ResponsiveValue<AspectRatio>;
    blockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content">;
    boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>;
    boxSize?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
    boxSizing?: BoxSizing;
    display?: ResponsiveValue<Display>;
    float?: ResponsiveValue<Float>;
    h?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">;
    height?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">;
    hideBelow?: ResponsiveValue<string>;
    hideFrom?: ResponsiveValue<string>;
    inlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    isolation?: ResponsiveValue<Isolation>;
    maxBlockSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">;
    maxH?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxHeight?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxInlineSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    maxW?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    maxWidth?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    minBlockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">;
    minH?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    minHeight?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">;
    minInlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">;
    minW?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">;
    minWidth?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">;
    objectFit?: ResponsiveValue<ObjectFit>;
    objectPosition?: ResponsiveValue<ObjectPosition<Length>>;
    overflow?: ResponsiveValue<Overflow>;
    overflowX?: ResponsiveValue<OverflowX>;
    overflowY?: ResponsiveValue<OverflowY>;
    overscroll?: ResponsiveValue<OverscrollBehavior>;
    overscrollBehavior?: ResponsiveValue<OverscrollBehavior>;
    overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>;
    overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>;
    overscrollX?: ResponsiveValue<OverscrollBehaviorX>;
    overscrollY?: ResponsiveValue<OverscrollBehaviorY>;
    verticalAlign?: ResponsiveValue<VerticalAlign<Length>>;
    visibility?: ResponsiveValue<Visibility>;
    w?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
    width?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">;
}

Hierarchy (view full)

Properties

aspectRatio? blockSize? boxDecorationBreak? boxSize? boxSizing? display? float? h? height? hideBelow? hideFrom? inlineSize? isolation? maxBlockSize? maxH? maxHeight? maxInlineSize? maxW? maxWidth? minBlockSize? minH? minHeight? minInlineSize? minW? minWidth? objectFit? objectPosition? overflow? overflowX? overflowY? overscroll? overscrollBehavior? overscrollBehaviorX? overscrollBehaviorY? overscrollX? overscrollY? verticalAlign? visibility? w? width?

Properties

Optional aspectRatio

aspectRatio?: ResponsiveValue<AspectRatio>

The CSS aspect-ratio property

Optional blockSize

blockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content">

Optional boxDecorationBreak

boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>

The CSS box-decoration property

Optional boxSize

boxSize?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

The CSS width and height property

Optional boxSizing

boxSizing?: BoxSizing

The CSS box-sizing property

Optional display

display?: ResponsiveValue<Display>

The CSS display property

Optional float

float?: ResponsiveValue<Float>

The CSS float property

Optional h

h?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">

The CSS height property

Optional height

height?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content">

The CSS height property

Optional hideBelow

hideBelow?: ResponsiveValue<string>

Hides an element below the specified breakpoint

Optional hideFrom

hideFrom?: ResponsiveValue<string>

Hides an element from the specified breakpoint and up

Optional inlineSize

inlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">

Optional isolation

isolation?: ResponsiveValue<Isolation>

The CSS isolation property

Optional maxBlockSize

maxBlockSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">

Optional maxH

maxH?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS max-height property

Optional maxHeight

maxHeight?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS max-height property

Optional maxInlineSize

maxInlineSize?: ResponsiveValue<number | "none" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">

Optional maxW

maxW?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS max-width property

Optional maxWidth

maxWidth?: ResponsiveValue<number | "none" | "intrinsic" | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS max-width property

Optional minBlockSize

minBlockSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-fill-available">

Optional minH

minH?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS min-height property

Optional minHeight

minHeight?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "-webkit-min-content">

The CSS min-height property

Optional minInlineSize

minInlineSize?: ResponsiveValue<number | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-fill-available">

Optional minW

minW?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

The CSS min-width property

Optional minWidth

minWidth?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

The CSS min-width property

Optional objectFit

objectFit?: ResponsiveValue<ObjectFit>

The CSS object-fit property

Optional objectPosition

objectPosition?: ResponsiveValue<ObjectPosition<Length>>

The CSS object-position property

Optional overflow

overflow?: ResponsiveValue<Overflow>

The CSS overflow property

Optional overflowX

overflowX?: ResponsiveValue<OverflowX>

The CSS overflow-x property

Optional overflowY

overflowY?: ResponsiveValue<OverflowY>

The CSS overflow-y property

Optional overscroll

overscroll?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehavior

overscrollBehavior?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehaviorX

overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollBehaviorY

overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional overscrollX

overscrollX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollY

overscrollY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional verticalAlign

verticalAlign?: ResponsiveValue<VerticalAlign<Length>>

The CSS vertical-align property

Optional visibility

visibility?: ResponsiveValue<Visibility>

The CSS visibility property

Optional w

w?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

The CSS width property

Optional width

width?: ResponsiveValue<number | "intrinsic" | string & {} | "auto" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-webkit-max-content" | "min-intrinsic">

The CSS width property

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc