Introdução
Neste laboratório, os participantes explorarão a propriedade flex-grow no CSS Flexbox, uma técnica de layout poderosa para criar designs web responsivos e flexíveis. Através de uma abordagem passo a passo, os alunos criarão um arquivo HTML, configurarão um container flexbox e experimentarão diferentes valores de flex-grow para entender como os elementos se expandem dinamicamente e distribuem o espaço disponível.
O laboratório guia os alunos na criação de uma estrutura HTML básica, na definição de um container flexbox e na aplicação das propriedades flex-grow aos elementos filhos. Ao definir valores numéricos e observar como as caixas crescem proporcionalmente, os participantes obterão insights práticos sobre como controlar a flexibilidade do layout e entender o comportamento diferenciado de flex-grow no design web.
Crie o Arquivo HTML e Configure a Estrutura Básica
Nesta etapa, você criará o arquivo HTML fundamental para explorar a propriedade flex-grow no CSS Flexbox. Configuraremos uma estrutura HTML básica e prepararemos o ambiente para nossa demonstração de flexbox.
Primeiro, navegue até o diretório do projeto e crie um arquivo HTML:
cd ~/project
touch index.html
Agora, abra o arquivo index.html no WebIDE e adicione a seguinte estrutura HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demonstração de flex-grow do Flexbox</title>
<style>
/* Os estilos CSS serão adicionados nas etapas subsequentes */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>
Esta estrutura HTML básica inclui:
- Um
<div>container que se tornará nosso container flexbox - Três elementos
<div>filhos representando as caixas que usaremos para demonstrarflex-grow - Uma seção
<style>de espaço reservado onde adicionaremos CSS nas etapas posteriores
Exemplo de saída ao visualizar o arquivo:
[Arquivo HTML criado com estrutura básica e três caixas div]
O arquivo agora está pronto para exploração adicional do CSS Flexbox nas próximas etapas.
Defina o Container Flexbox com a Propriedade flex-grow
Nesta etapa, você aprenderá como definir um container flexbox e entender o conceito básico da propriedade flex-grow. Abra o arquivo index.html no WebIDE e modifique a seção <style> para criar um container flexbox.
Adicione o seguinte CSS para definir o container flexbox:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
Vamos detalhar o CSS:
display: flex;transforma o container em um container flexwidth: 100%;faz com que o container ocupe toda a largura- Os estilos
.boxdefinem a aparência dos itens flex individuais
Exemplo de saída quando visualizado em um navegador:
[Três caixas verdes exibidas em uma linha horizontal, preenchendo o container]
A propriedade flex-grow determina como os itens flex crescem em relação uns aos outros quando há espaço extra disponível. Por padrão, flex-grow é definido como 0, o que significa que os itens não crescerão além de seu tamanho inicial.
Para ver o comportamento padrão, abra o arquivo HTML em um navegador web. Você notará que as caixas mantêm seu tamanho inicial e não se expandem para preencher o container.
Explore os Valores Inicial e Inherit de flex-grow
Nesta etapa, você investigará os comportamentos padrão e herdados da propriedade flex-grow. Abra seu arquivo index.html e atualize a seção <style> para explorar esses conceitos.
Primeiro, vamos entender o valor inicial de flex-grow:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* O flex-grow inicial é 0 por padrão */
/* flex-grow: 0; */
}
.box1 {
/* Definindo explicitamente o valor inicial */
flex-grow: 0;
}
.box2 {
/* Demonstrando herança */
flex-grow: inherit;
}
.box3 {
/* Outra forma de mostrar o estado inicial */
flex-grow: initial;
}
</style>
Observações chave:
flex-grow: 0;é o valor padrão, o que significa que os itens não crescerãoinheritpega o valor deflex-growdo container paiinitialredefine a propriedade para seu valor padrão (0)
Exemplo de saída quando visualizado em um navegador:
[Três caixas verdes de largura igual, não se expandindo para preencher o container]
Para ilustrar ainda mais, você pode modificar o HTML para mostrar como esses valores funcionam:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 0)</div>
<div class="box box2">Box 2 (flex-grow: inherit)</div>
<div class="box box3">Box 3 (flex-grow: initial)</div>
</div>
</body>
Este exemplo demonstra que, por padrão, os itens flex mantêm seu tamanho inicial e não crescem para preencher o espaço extra no container.
Defina Valores Numéricos de flex-grow para Diferentes Elementos
Nesta etapa, você aprenderá como usar valores numéricos com flex-grow para controlar como os itens flex se expandem dentro de um container. Abra seu arquivo index.html e atualize a seção <style> para explorar diferentes valores numéricos de flex-grow.
Atualize seu CSS com os seguintes estilos:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* Box 1 crescerá 1 unidade */
flex-grow: 1;
}
.box2 {
/* Box 2 crescerá 2 unidades */
flex-grow: 2;
}
.box3 {
/* Box 3 crescerá 3 unidades */
flex-grow: 3;
}
</style>
Atualize o HTML para corresponder aos novos estilos:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 3)</div>
</div>
</body>
Observações chave:
- Os valores de
flex-growdeterminam como o espaço extra é distribuído - Valores mais altos significam mais crescimento em relação a outros itens
- O espaço total disponível é dividido proporcionalmente
Exemplo de saída quando visualizado em um navegador:
[Três caixas verdes com larguras diferentes:
- Box 1 é a mais estreita (1 unidade)
- Box 2 é mais larga (2 unidades)
- Box 3 é a mais larga (3 unidades)]
As caixas agora se expandirão de forma diferente com base em seus valores de flex-grow, demonstrando como você pode controlar o dimensionamento dos elementos em um container flex.
Experimente com as Proporções de flex-grow
Nesta etapa, você explorará proporções de flex-grow mais complexas e entenderá como diferentes valores interagem dentro de um container flex. Atualize seu arquivo index.html com o seguinte código:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 1)</div>
<div class="box box4">Box 4 (flex-grow: 4)</div>
</div>
</body>
Conceitos chave a serem entendidos:
- Valores totais de flex-grow: 1 + 2 + 1 + 4 = 8
- Box 1 e Box 3 recebem 1/8 de espaço extra cada
- Box 2 recebe 2/8 de espaço extra
- Box 4 recebe 4/8 (metade) de espaço extra
Exemplo de saída quando visualizado em um navegador:
[Quatro caixas coloridas com larguras diferentes:
- Box 1 e Box 3: Estreitas (1/8 cada)
- Box 2: Ligeiramente mais larga (2/8)
- Box 4: Mais larga (4/8 ou metade do container)]
Este exemplo demonstra como os valores de flex-grow criam dimensionamento proporcional, permitindo um controle preciso sobre a expansão dos elementos.
Resumo
Neste laboratório, os participantes exploram a propriedade flex-grow no CSS Flexbox, criando um arquivo HTML estruturado e implementando um container flexível com múltiplos elementos div. O laboratório começa configurando uma estrutura HTML básica com um container e três caixas filhas, demonstrando a configuração fundamental para experimentos com flexbox.
Através da estilização CSS progressiva, os alunos descobrem como transformar um container padrão em um layout flexbox, aplicando a propriedade flex-grow para entender como os elementos se expandem dinamicamente e distribuem o espaço disponível. A abordagem prática permite que os participantes experimentem com diferentes valores de flex-grow, observando como as proporções numéricas influenciam o dimensionamento e a distribuição dos elementos do container flex.
