Interface FlexboxProps

interface FlexboxProps {
    alignContent?: ResponsiveValue<AlignContent>;
    alignItems?: ResponsiveValue<AlignItems>;
    alignSelf?: ResponsiveValue<AlignSelf>;
    columnGap?: ResponsiveValue<ColumnGap<Length>>;
    flex?: ResponsiveValue<Flex<Length>>;
    flexBasis?: ResponsiveValue<FlexBasis<Length>>;
    flexDir?: ResponsiveValue<FlexDirection>;
    flexDirection?: ResponsiveValue<FlexDirection>;
    flexFlow?: ResponsiveValue<FlexFlow>;
    flexGrow?: ResponsiveValue<FlexGrow>;
    flexShrink?: ResponsiveValue<FlexShrink>;
    flexWrap?: ResponsiveValue<FlexWrap>;
    gap?: ResponsiveValue<Gap<Length>>;
    justifyContent?: ResponsiveValue<JustifyContent>;
    justifyItems?: ResponsiveValue<JustifyItems>;
    justifySelf?: ResponsiveValue<JustifySelf>;
    order?: ResponsiveValue<Order>;
    placeContent?: ResponsiveValue<PlaceContent>;
    placeItems?: ResponsiveValue<PlaceItems>;
    placeSelf?: ResponsiveValue<PlaceSelf>;
    rowGap?: ResponsiveValue<RowGap<Length>>;
}

Hierarchy (view full)

Properties

alignContent? alignItems? alignSelf? columnGap? flex? flexBasis? flexDir? flexDirection? flexFlow? flexGrow? flexShrink? flexWrap? gap? justifyContent? justifyItems? justifySelf? order? placeContent? placeItems? placeSelf? rowGap?

Properties

Optional alignContent

alignContent?: ResponsiveValue<AlignContent>

The CSS align-content property.

It defines the distribution of space between and around content items along a flexbox cross-axis or a grid's block axis.

See

Mozilla Docs

Optional alignItems

alignItems?: ResponsiveValue<AlignItems>

The CSS align-items property.

It defines the align-self value on all direct children as a group.

  • In Flexbox, it controls the alignment of items on the Cross Axis.
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

See

Mozilla Docs

Optional alignSelf

alignSelf?: ResponsiveValue<AlignSelf>

The CSS align-self property.

It works like align-items, but applies only to a single flexbox item, instead of all of them.

See

Mozilla Docs

Optional columnGap

columnGap?: ResponsiveValue<ColumnGap<Length>>

The CSS column-gap property.

It sets the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional flex

flex?: ResponsiveValue<Flex<Length>>

The CSS flex property.

It defines how a flex item will grow or shrink to fit the space available in its flex container.

See

Mozilla Docs

Optional flexBasis

flexBasis?: ResponsiveValue<FlexBasis<Length>>

The CSS flex-basis property.

It defines the initial main size of a flex item.

See

Mozilla Docs

Optional flexDir

flexDir?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexDirection

flexDirection?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexFlow

flexFlow?: ResponsiveValue<FlexFlow>

The CSS flex-flow property.

It is a shorthand property for flex-direction and flex-wrap. It specifies the direction of a flex container, as well as its wrapping behavior.

See

Mozilla Docs

Optional flexGrow

flexGrow?: ResponsiveValue<FlexGrow>

The CSS flex-grow property.

It defines how much a flexbox item should grow if there's space available.

See

Mozilla Docs

Optional flexShrink

flexShrink?: ResponsiveValue<FlexShrink>

The CSS flex-shrink property.

It defines how much a flexbox item should shrink if there's not enough space available.

See

Mozilla Docs

Optional flexWrap

flexWrap?: ResponsiveValue<FlexWrap>

The CSS flex-wrap property.

It defines whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

See

Mozilla Docs

Optional gap

gap?: ResponsiveValue<Gap<Length>>

The CSS gap property.

It defines the gap between items in both flex and grid contexts.

See

Mozilla Docs

Optional justifyContent

justifyContent?: ResponsiveValue<JustifyContent>

The CSS justify-content property.

It defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

See

Mozilla Docs

Optional justifyItems

justifyItems?: ResponsiveValue<JustifyItems>

The CSS justify-items property.

It defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

See

Mozilla Docs

Optional justifySelf

justifySelf?: ResponsiveValue<JustifySelf>

The CSS justify-self property.

It defines the way a box is justified inside its alignment container along the appropriate axis.

See

Mozilla Docs

Optional order

order?: ResponsiveValue<Order>

The CSS order property.

It defines the order to lay out an item in a flex or grid container.

See

Mozilla Docs

Optional placeContent

placeContent?: ResponsiveValue<PlaceContent>

The CSS place-content property.

It allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional placeItems

placeItems?: ResponsiveValue<PlaceItems>

The CSS place-items property.

It allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flex.

See

Mozilla Docs

Optional placeSelf

placeSelf?: ResponsiveValue<PlaceSelf>

The CSS place-self property.

It allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional rowGap

rowGap?: ResponsiveValue<RowGap<Length>>

The CSS row-gap property.

It sets the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc