Introdução
O Flex Box CSS é um modelo de layout que facilita o alinhamento e o dimensionamento de elementos na página. Ele é muito útil quando se trata de criar layouts responsivos que se adaptam a diferentes tamanhos de tela. Neste artigo, vamos explorar como usar o Flex Box CSS para criar layouts.
Começando
Para começar a usar o Flex Box CSS, você precisará adicionar a propriedade “display: flex” ao elemento que deseja transformar em um container flexível. Por exemplo:
<div style="display: flex">
<p>Element 1</p>
<p>Element 2</p>
</div>
Isso transformará o elemento “div” em um container flexível e os elementos “p” em itens flexíveis.
Direção do Flex
O Flex Box CSS permite que você controle a direção em que os itens são exibidos no container. A direção padrão é a horizontal (da esquerda para a direita), mas você pode alterá-la para a vertical (de cima para baixo) usando a propriedade “flex-direction”.
<div style="display: flex; flex-direction: column">
<p>Element 1</p>
<p>Element 2</p>
</div>
Ajuste de itens
O Flex Box CSS também permite que você ajuste o tamanho dos itens de acordo com o tamanho do container. Por exemplo, você pode fazer com que os itens ocupem todo o espaço disponível usando a propriedade “flex: 1”.
<div style="display: flex">
<p style="flex: 1">Element 1</p>
<p style="flex: 1">Element 2</p>
</div>
Isso fará com que os elementos “p” ocupem metade do espaço disponível cada um. Você também pode usar números diferentes de “1” para distribuir o espaço de forma diferente.
Por exemplo:
<div style="display: flex">
<p style="flex: 2">Element 1</p>
<p style="flex: 1">Element 2</p>
</div>
Aqui, o elemento “p” com “flex: 2” ocupará 2/3 do espaço disponível, enquanto o elemento “p” com “flex: 1” ocupará 1/3 do espaço disponível.
Alinhamento
O Flex Box CSS também permite que você alinhe os itens de acordo com o container. Por exemplo, você pode centralizar os itens horizontalmente usando a propriedade
