as

string

• article

• aside

• div (default)

• header

• footer

• main

• nav

• section

Tags HTML Semânticas

gap

FlexGap

• none (default)

• GapValues

• { [key in LayoutTokens]?: GapValues }

Distância aplicada entre os elementos internos do Flex. Pode especificar uma distância para vertical e uma outra para a horizontal.

GridGapValues

• SpacingTokens | SpacingInnerToken
• { vertical? : SpacingTokens | SpacingInnerToken; horizontal? : SpacingTokens | SpacingInnerToken; };

SpacingTokens

• base
• base02
• base03
• base04
• base05
• base06
• base07
• base08
• base09
• base10
• base12
• base15

SpacingInnerToken

• innerBase
• innerBase02
• innerBase03
• innerBase04
• innerBase05
• innerBase06
• innerBase08
• innerBase10
• innerBase12
• innerBase14

LayoutTokens

• xs
• sm
• md
• lg
• xl
• xxl

centered

boolean

• true

• false (default)

Propriedade de atalho;
Se passada como true, centraliza os elementos pelas propriedades 'alignItems' e 'justifyContent'.

alignItems

string

• stretch (default)

• flex-start

• flex-end

• center

A propriedade 'alignItems' da Flexbox API.

justifyContent

string

• flex-start (default)

• flex-end

• center

• space-between

• space-around

• space-evenly

A propriedade 'justifyContent' da Flexbox API.

flexDirection

string

• row (default)

• row-reverse

• column

• column-reverse

A propriedade 'flexDirection' da Flexbox API.

As propriedades row-reverse e column-reverse podem criar desconexão entre a experiência visual e a ordem do conteúdo no DOM.
A consequência disso é um problema de acessibilidade; pessoas navegando com o apoio de tecnologias assistivas ainda vão consumir esse conteúdo na ordem original.
Evite o seu uso, tentando utilizar apenas em contextos em que a alteração não faça diferença no consumo do conteúdo.
Leia mais aqui

flexWrap

string

• nowrap

• wrap (default)

• wrap-reverse

A propriedade 'flexWrap' da Flexbox API.

children

ReactNode

• —

Conteúdo interno.