Posicionamento - Display Flex

Limitações dos layouts tradicionais

Antes do Flexbox, organizar elementos em uma página era mais limitado e, muitas vezes, trabalhoso. Os principais comportamentos usados eram:

Elementos block

Elementos com display: block ocupam toda a largura disponível da página.

Exemplos: <div>, <p>, <section>

Características:

• Quebram linha automaticamente.
• Ficam um abaixo do outro.
• Permitem definir width e height.

Problema: Colocar elementos lado a lado exigia técnicas extras, como float, inline-block ou cálculos manuais de largura.

Elementos inline

Elementos com display: inline ficam na mesma linha, lado a lado.

Exemplos: <a>, <span>, <strong>, <img>

Características:

• Não quebram linha automaticamente.
• Ficam um ao lado do outro.
• Não permitem definir width e height.

Problema:

• Não é possível definir largura e altura para elementos inline.
• O alinhamento vertical e espaçamento costumavam gerar dificuldades.

Uso de position

Elementos com position: relative, absolute ou fixed permitem um controle mais preciso sobre a posição dos elementos na página.

Problema:

• O posicionamento ficava “manual”.
• Elementos podiam sobrepor outros.
• O layout perdia flexibilidade e adaptação a diferentes tamanhos de tela.
• Tornava layouts responsivos mais complexos.

Flexbox - Display Flex

O Flexbox é um modelo de layout do CSS que permite criar layouts flexíveis e responsivos de forma mais simples e intuitiva.

Com ele, é possível:

• alinhar elementos horizontalmente e verticalmente;
• distribuir espaços automaticamente;
• criar layouts responsivos com menos código;
• controlar facilmente espaçamentos e tamanhos.

O Flexbox trabalha com a ideia de:

• container flex → elemento pai;
• itens flex → elementos filhos.

Ativando o Flexbox

Para ativar o Flexbox, basta definir a propriedade display: flex no elemento pai (container).

.container {
    display: flex;
}

Ao fazer isso:

• os elementos filhos passam a se comportar como itens flex;
• o alinhamento e distribuição passam a ser controlados pelo Flexbox.

Exemplo

HTML:

<div class="container">
	<div class="item">Item 1</div>
	<div class="item">Item 2</div>
	<div class="item">Item 3</div>
</div>

CSS:

.container {
	display: flex;
}
.item {
    height: 100px;
    background-color: lightblue;
    border: 1px solid #333;
}

Resultado: Os itens ficam lado a lado, ocupando apenas o espaço necessário, e podem ser facilmente alinhados e espaçados usando as propriedades do Flexbox.

Principais vantagens do Flexbox

• Centralização simplificada.
• Distribuição automática de espaço.
• Facilidade para alinhar elementos.
• Melhor adaptação para telas diferentes.
• Código mais limpo e moderno.
• Redução do uso de float e posicionamentos complexos.

Propriedades do Flexbox

<div class="container">
	<div class="item" id="item1">1</div>
	<div class="item" id="item2">2</div>
	<div class="item" id="item3">3</div>
	<div class="item" id="item4">4</div>
</div>

.container {
	display: flex;
}

.container {
	display: flex;
	flex-wrap: wrap;
}

.container {
	display: flex;
	justify-content: flex-end;
}

.container {
	display: flex;
	justify-content: center;
}

.container {
	display: flex;
}
.item{
	flex-grow: 1;
}

.container {
	display: flex;
}
.item{
	flex-grow: 1;
}

.container {
	display: flex;
}
.item{
	flex-grow: 1;
	flex-basis: 0;
}

.container {
	display: flex;
}
#item1{
	flex-grow: 1;
}
#item2{
	flex-grow: 2;
}