3.1 Flexbox
Criar layouts flexíveis usando Flexbox e Grid é uma técnica fundamental no desenvolvimento de sites responsivos modernos. Essas tecnologias permitem gerenciar facilmente o posicionamento dos elementos na página, garantindo que se adaptem a diferentes tamanhos de tela e dispositivos.
Flexbox (Flexible Box Layout Module) é destinado ao posicionamento unidimensional de elementos (ou em linha ou em coluna). Flexbox simplifica a criação de layouts flexíveis e responsivos.
Principais conceitos do Flexbox:
- Flex-container: elemento ao qual é aplicado a propriedade
display: flex - Flex-itens: elementos filhos do flex-container, que são dispostos dentro dele
Propriedades do Flexbox
Flex-container:
display: flex: define o elemento como um container flexflex-direction: define a direção da disposição dos flex-itens (row,column,row-reverse,column-reverse)justify-content: gerencia o alinhamento dos flex-itens ao longo do eixo principal (flex-start,flex-end,center,space-between,space-around)align-items: gerencia o alinhamento dos flex-itens ao longo do eixo transversal (stretch,flex-start,flex-end,center,baseline)
Flex-itens:
flex-grow: define a capacidade do item de crescer com espaço disponívelflex-shrink: define a capacidade do item de encolher quando houver falta de espaçoflex-basis: define o tamanho inicial do item antes da distribuição de espaço disponívelalign-self: sobrepõe o alinhamento transversal do item definido emalign-items
Exemplo de uso do Flexbox
Vamos criar um layout com três colunas que se adaptará a diferentes tamanhos de tela:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Coluna 1</div>
<div class="flex-item">Coluna 2</div>
<div class="flex-item">Coluna 3</div>
</div>
</body>
</html>
Explicação do código:
-
.flex-container: define o container como um flex-container, alinha os elementos com espaços iguais entre eles e permite que os elementos passem para a próxima linha quando não houver espaço suficiente -
.flex-item: flex-itens que ocupam espaço igual, têm largura mínima de 200px e são distribuídos uniformemente dentro do container
3.2 CSS Grid
O CSS Grid Layout é um sistema bidimensional de layout que permite criar layouts complexos usando linhas e colunas.
Principais conceitos do CSS Grid:
- Grid-container: elemento ao qual é aplicado a propriedade
display: grid - Grid-itens: elementos filhos do grid-container, que são dispostos na grade
Propriedades do CSS Grid
Grid-container:
display: grid: define o elemento como um grid-containergrid-template-columns: define o número e o tamanho das colunas na gradegrid-template-rows: define o número e o tamanho das linhas na gradegap: gerencia os espaços entre linhas e colunasjustify-items: gerencia o alinhamento horizontal dos grid-itensalign-items: gerencia o alinhamento vertical dos grid-itens
grid-column: define quantas colunas o item irá abrangergrid-row: define quantas linhas o item irá abrangerjustify-self: sobrepõe o alinhamento horizontal do itemalign-self: sobrepõe o alinhamento vertical do item
Grid-itens:
Exemplo de uso do CSS Grid
Vamos criar um layout com três colunas e duas linhas, que se adaptará a diferentes tamanhos de tela.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Explicação do código:
.grid-container: define o container como um grid-container com três colunas e duas linhas, cada item ocupa espaço igual.grid-item: grid-itens com espaçamentos uniformes e fundo
GO TO FULL VERSION