Introdução
Neste laboratório, os participantes explorarão a propriedade flex-basis no CSS Flexbox através de uma abordagem abrangente e prática. Ao criar um arquivo HTML estruturado e adicionar progressivamente estilos CSS, os alunos obterão experiência prática na compreensão de como flex-basis influencia o dimensionamento inicial dos itens flexíveis dentro de um contêiner.
O laboratório guia os alunos na criação de um layout flexbox, na definição de propriedades do contêiner, na aplicação de flex-basis a itens individuais e na experimentação com diferentes valores. Os participantes aprenderão como flex-basis interage com outras propriedades flexíveis, permitindo que controlem o dimensionamento fundamental e a distribuição de elementos em designs web responsivos.
Criar Arquivo HTML para o Layout Flexbox
Nesta etapa, você criará o arquivo HTML fundamental para explorar a propriedade flex-basis no CSS Flexbox. Configuraremos uma estrutura HTML simples que servirá como base para nossos experimentos de layout flexbox.
Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado flexbox-demo.html usando a interface do WebIDE.
Aqui está a estrutura HTML básica que você usará:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-basis Demo</title>
<style>
/* Os estilos CSS serão adicionados nas etapas subsequentes */
</style>
</head>
<body>
<div class="container">
<div class="flex-item item1">Item 1</div>
<div class="flex-item item2">Item 2</div>
<div class="flex-item item3">Item 3</div>
<div class="flex-item item4">Item 4</div>
<div class="flex-item item5">Item 5</div>
</div>
</body>
</html>
Vamos detalhar a estrutura HTML:
- Criamos um
<div>contêiner com a classecontainer - Dentro do contêiner, temos cinco elementos
<div>com as classesflex-iteme classes de item individuais - Essa estrutura nos permitirá demonstrar as propriedades
flex-basisnas etapas seguintes
Exemplo de saída ao salvar o arquivo no WebIDE:
File created: ~/project/flexbox-demo.html
Definir o Contêiner Flexbox CSS Básico
Nesta etapa, você aprenderá como criar um contêiner Flexbox CSS básico, adicionando estilos ao arquivo HTML criado na etapa anterior. Abra o arquivo flexbox-demo.html no WebIDE e modifique a seção <style> para definir o contêiner flexbox.
Adicione o seguinte CSS para definir o contêiner flexbox básico:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
Vamos detalhar as principais propriedades CSS:
display: flex;transforma o contêiner em um contêiner flexívelbackground-coloreborderajudam a visualizar o contêiner- Os estilos
.flex-itemdefinem a aparência dos itens flexíveis individuais marginepaddingfornecem espaçamento entre os itens
Exemplo de saída ao salvar o arquivo:
Flexbox container styles added to flexbox-demo.html
Ao abrir este arquivo HTML em um navegador, você verá cinco caixas verdes dispostas horizontalmente, demonstrando o layout flexível padrão.
Aplicar a Propriedade flex-basis aos Itens Flex
Nesta etapa, você aprenderá sobre a propriedade flex-basis e como ela controla o tamanho inicial dos itens flexíveis. Abra o arquivo flexbox-demo.html no WebIDE e atualize os estilos CSS para demonstrar flex-basis.
Adicione o seguinte CSS para aplicar flex-basis a itens flexíveis individuais:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: 150px;
}
.item4 {
flex-basis: 250px;
}
.item5 {
flex-basis: 120px;
}
</style>
Pontos-chave sobre flex-basis:
- Define o tamanho principal inicial de um item flexível
- Pode ser especificado em pixels, porcentagens ou outras unidades
- Determina o tamanho padrão antes do crescimento ou encolhimento flexível
- Substitui
widthem um contêiner flexível
Exemplo de saída ao salvar o arquivo:
Flex items with different flex-basis values added
Ao abrir o arquivo HTML em um navegador, você verá itens flexíveis com larguras iniciais variadas com base em seus valores flex-basis.
Experimentar com Diferentes Valores de flex-basis
Nesta etapa, você explorará várias maneiras de especificar os valores de flex-basis e entender como diferentes unidades e abordagens afetam o dimensionamento dos itens flexíveis. Atualize o CSS em seu arquivo flexbox-demo.html com os seguintes estilos:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Different flex-basis value types */
.item1 {
flex-basis: 100px;
} /* Fixed pixel width */
.item2 {
flex-basis: 20%;
} /* Percentage of container */
.item3 {
flex-basis: auto;
} /* Based on content */
.item4 {
flex-basis: 10rem;
} /* Using rem units */
.item5 {
flex-basis: content;
} /* Based on content size */
</style>
Observações-chave sobre os valores de flex-basis:
- Valores em pixels (
100px) fornecem uma largura fixa - Valores em porcentagem (
20%) escalam em relação ao contêiner autousa o tamanho do conteúdo do item- Diferentes unidades como
remoferecem dimensionamento responsivo - A palavra-chave
contentadapta-se ao conteúdo do item
Exemplo de saída ao salvar o arquivo:
Flex items with diverse flex-basis configurations
Ao abrir o arquivo HTML em um navegador, você verá como diferentes valores de flex-basis impactam o dimensionamento e o layout dos itens.
Explorar a Interação de flex-basis com Outras Propriedades Flex
Nesta etapa, você aprenderá como flex-basis interage com outras propriedades flexíveis, como flex-grow e flex-shrink. Atualize o CSS em seu arquivo flexbox-demo.html com o seguinte exemplo abrangente:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
width: 100%;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Demonstrating flex property interactions */
.item1 {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
}
.item2 {
flex-basis: 200px;
flex-grow: 2;
flex-shrink: 1;
}
.item3 {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 2;
}
.item4 {
flex: 1 1 250px; /* shorthand for grow, shrink, basis */
}
.item5 {
flex: 2 0 120px;
}
</style>
Conceitos-chave das interações de propriedades flexíveis:
flex-grow: Determina o quanto um item crescerá em relação a outros itensflex-shrink: Controla o quanto um item encolherá em relação a outros itens- A abreviação
flexcombina grow, shrink e basis - Diferentes combinações criam comportamentos de layout exclusivos
Exemplo de saída ao salvar o arquivo:
Flex items with complex grow, shrink, and basis interactions
Ao abrir o arquivo HTML em um navegador, você observará como essas propriedades trabalham juntas para criar layouts flexíveis.
Resumo
Neste laboratório, os participantes exploram a propriedade flex-basis no CSS Flexbox, criando uma demonstração abrangente em HTML e CSS. O laboratório começa com a construção de um arquivo HTML fundamental, apresentando um contêiner com múltiplos itens flexíveis, estabelecendo a estrutura estrutural para experimentos de layout flexbox. Os participantes aprendem a definir um contêiner flexbox básico usando CSS, definindo propriedades de exibição, cores de fundo e estilos iniciais para criar um layout responsivo e visualmente envolvente.
O laboratório guia os alunos através da aplicação da propriedade flex-basis aos itens flexíveis, permitindo que eles entendam como essa propriedade controla o tamanho inicial dos elementos flexíveis antes que espaço adicional seja distribuído. Ao experimentar diferentes valores de flex-basis e explorar sua interação com outras propriedades flexíveis, os participantes obtêm insights práticos sobre como gerenciar layouts flexíveis e controlar o dimensionamento de elementos dentro de um contêiner flexbox.
