FlexBox

Flexbox é um componente que usa a API de Flexbox do CSS para fornecer controle sobre o alinhamento e distribuição de elementos em uma única dimensão (linha ou coluna).

---

Quando usar:

• Para alinhar elementos em uma única dimensão, seja em linha ou coluna.
• Quando for necessário distribuir o espaço entre itens de forma responsiva, adaptando-se ao tamanho da tela.
• Para centralizar elementos horizontal ou verticalmente dentro de um contêiner.
• Quando for necessário controlar o crescimento, encolhimento e espaçamento de elementos filhos em relação ao contêiner pai.

Quando não usar:

• Quando o layout requer organização em duas dimensões (linhas e colunas simultaneamente). Para esses casos, utilize o <cds-grid>.
• Para cenários que envolvem estruturas complexas de layout, como Dashboards ou Galerias de Imagens, onde o controle bidimensional é necessário.
• Em situações onde o posicionamento fixo ou absoluto é necessário para controlar o layout do conteúdo.

---

Uso

<CdsFlexbox
	class="grid-background"
	direction="row"
	:gap="1"
	wrap="wrap"
	justify="start"
	align="start"
	tag="div"
	:fluid="false"
>
	<div style="height: 50px; width: 300px" class="docs-grid-cell"> FlexItem 1 </div>
	<div style="height: 50px; width: 300px" class="docs-grid-cell"> FlexItem 2 </div>
	<div style="height: 50px; width: 300px" class="docs-grid-cell"> FlexItem 3 </div>
	<div style="height: 50px; width: 300px" class="docs-grid-cell"> FlexItem 4 </div>
</CdsFlexbox>

---

Preview

FlexItem 1

FlexItem 2

FlexItem 3

FlexItem 4

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
direction	string	'row'	row row-reverse column column-reverse	Define a direção dos itens dentro do FlexBox. Valores aceitos: 'row', 'row-reverse', 'column', 'column-reverse'.
wrap	string	'wrap'	nowrap wrap wrap-reverse	Controla o comportamento de quebra de linha dos itens no FlexBox. Valores aceitos: 'nowrap', 'wrap', 'wrap-reverse'.
gap	number|string	0	--	Define o espaçamento entre os itens no FlexBox. O valor setado é multiplicado por 4, assim como nos tokens scss do Cuida. O valor padrão é 0, mas pode ser configurado para outros valores numéricos ou strings.
justify	string	'flex-start'	flex-start flex-end center space-between space-around space-evenly	Controla a distribuição dos itens ao longo do eixo principal. Valores aceitos: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'.
align	string	'stretch'	stretch flex-start flex-end center baseline	Define o alinhamento dos itens ao longo do eixo transversal. Valores aceitos: 'stretch', 'flex-start', 'flex-end', 'center', 'baseline'.
tag	string	'div'	div span main footer form header aside ul li	Define a tag que o componente deve utilizar na sua renderização. Valores aceitos: 'div', 'span', 'main', 'footer', 'form', 'header', 'aside', 'ul', e 'li'. Por padrão o componente renderiza uma div.
fluid	boolean	false	--	Quando true, o flexbox irá ocupar 100% da largura disponível.

Slots

Nome	Descrição
#default	Slot com o conteúdo interno do FlexBox

---