Flexbox CSS – Aprenda a criar um Layout Flexível

Aprenda tudo sobre Flexbox CSS e compreenda os conceitos essenciais para criar um layout flexível em suas páginas.

Aqui nós vamos criar uma landing page para uma pizzaria e um aplicativo de ensino a distância (EAD). Mesmo sem experiência em programação, você pode criar projetos profissionais de forma rápida e intuitiva!

Para receber por e-mail o arquivo com o prompt que usaremos neste guia, preencha:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Flexbox CSS – Noções Essenciais para um Layout Flexível

Na aula de hoje, vou abordar o Flexbox no CSS para que você adquira as noções essenciais para criar um layout flexível.

A ideia é que você seja capaz de usar esse recurso do CSS para aprimorar a construção de suas páginas, organizando os elementos de maneira fácil e eficiente.

Vamos explorar as noções essenciais do Flexbox, desde a configuração de um flex-container até propriedades avançadas como flex-grow, flex-shrink, e order , para que você possa construir páginas web modernas e adaptáveis.

Vou demonstrar como inserir sombra nos elementos usando o box-shadow CSS, como ajustar a disposição dos elementos no CSS, como fazer o display da lista não ordenada no CSS e como ajustar as âncoras dentro dela.

Então, faça o download do material disponível e venha comigo aprender como utilizar o flexbox em suas páginas HTML.

VS Code – HTML e CSS

Para acompanhar esta aula, é importante que você tenha pelo menos o VS Code instalado e a extensão Live Server.

A extensão Live Server nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.

Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo dessa e de outras aulas de HTML e CSS aqui da Hashtag, confira essa aula aqui.

Estrutura do Arquivo HTML

No material disponível para download, você encontrará o arquivo HTML que utilizaremos ao longo desta aula.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox CSS</title>
  </head>
  <body>
    <header>
      <nav>
        <img
          src="https://www.hashtagtreinamentos.com/wp-content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png"
          alt="Logo da Hashtag"
        />
        <ul>
          <li><a href="https://www.hashtagtreinamentos.com">Home</a></li>
          <li><a href="https://www.hashtagtreinamentos.com/blog">Blog</a></li>
          <li>
            <a href="https://www.hashtagtreinamentos.com/contato">Contato</a>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Este é um arquivo de página HTML bastante simples. Nele, temos a <head> com as configurações gerais da página, e o <body>, que é o corpo do documento onde inserimos todo o conteúdo visível da página.

Dentro do <body>, temos o nosso <header> com uma barra de navegação (<nav>). Dentro dessa barra, temos uma imagem (<img>) e uma lista não ordenada (<ul>), que é apenas uma lista não organizada. Na nossa lista não ordenada, temos os itens da lista (<li>) e as tags de âncora (<a>).

A construção desse cabeçalho e a explicação semântica detalhada de cada um desses elementos podem ser encontradas nesta aula aqui.

Ferramenta do Programador

O objetivo desta aula é transformar nossa barra de navegação atual:

Para uma mais próxima a que encontramos no site da Hashtag:

Ou seja, precisamos criar um cabeçalho com sombreado, posicionando a logo e os menus corretamente, e, principalmente, aplicar um layout flexível a ela.

Para conseguirmos visualizar e descobrir a estilização aplicada à página da Hashtag, iremos utilizar a ferramenta de programador. Para isso, basta pressionar a tecla F12 com a página aberta em seu navegador.

Ao fazer isso, a ferramenta de desenvolvedor será aberta e poderemos visualizar toda a estrutura HTML da página da Hashtag, assim como a estilização CSS aplicada a ela.

Durante esta aula, faremos uso dessa ferramenta para descobrir as propriedades de elementos específicos e também para realizar modificações no estilo de nossa página, permitindo-nos visualizar as alterações antes de aplicá-las em nosso código.

Implementação do Flexbox no CSS

Para esta aula, vamos utilizar a estilização através de um arquivo CSS externo. Portanto, na pasta onde está o seu arquivo HTML, crie um arquivo chamado style.css.

Além disso, precisamos vincular nosso arquivo CSS ao arquivo HTML. Para isso, dentro da tag <head> do nosso documento HTML, vamos criar um link com o arquivo CSS usando a tag <link>.

Nesse link, definiremos o atributo rel com o valor "stylesheet", indicando que este é um recurso de estilização. O atributo href receberá o caminho para o arquivo CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>

Feito isso, as edições que fizermos no arquivo style.css serão refletidas em nossa página.

Essa é uma das três formas de utilizarmos o CSS. Se você quiser aprender mais sobre as outras maneiras de aplicarmos o CSS, confira esta aula aqui.

Espaçamento entre os Elementos – Margin e Padding

Após realizar as configurações necessárias, podemos iniciar a estilização do nosso cabeçalho.

O primeiro passo é abrir nossa página no navegador. Para isso, clique com o botão direito do mouse sobre o arquivo HTML e selecione a opção Open with Live Server.

Em seguida, abra a ferramenta do programador na janela que será exibida. Para isso, vá até o navegador com a página aberta e pressione F12.

Na ferramenta do programador, vamos posicionar o cursor sobre a tag <body>.

E também sobre a tag <nav>.

Note que o <body> da nossa página possui um espaçamento externo, uma margim (indicada em laranja) responsável por gerar esse espaçamento externo na nossa barra de navegação, já que ela ocupa todo o espaço dentro do <body>.

Para zerarmos o espaçamento interno e externo do nosso <body>, vamos criar, dentro do nosso arquivo CSS, um seletor para o elemento <body> e atribuir a ele as propriedades padding e margin com o valor 0.

body {
    padding: 0;
    margin: 0;
  }

Feito isso, vamos criar um espaçamento interno para a nossa barra de navegação, a fim de criar um espaço entre o limite da barra de navegação e os elementos que a compõem.

Vamos criar um seletor para a tag <nav> no arquivo CSS e definir a propriedade padding com o valor de 15px e 30px, onde o primeiro valor é para o espaçamento vertical (acima e abaixo) e o segundo para o espaçamento horizontal (esquerda e direita).

nav {
    padding: 15px 30px;
}

Box Shadow – Sombra no CSS

Além do espaçamento, nossa barra de navegação possui um sombreado que delimita onde termina a barra de navegação e começa o conteúdo principal da página.

Para criar esse efeito de sombreado, vamos utilizar a propriedade box-shadow. Para essa propriedade, precisamos especificar os valores correspondentes ao deslocamento vertical, deslocamento horizontal, desfoque e cor da sombra.

nav {
    padding: 15px 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

Dessa forma, nossa barra de navegação terá um leve sombreado na parte inferior dela.

Configuração de Layout com Flexbox CSS – Flexbox Editor

Agora que finalizamos os ajustes anteriores, podemos nos concentrar no tema principal desta aula: a configuração do nosso layout flexível utilizando o Flexbox.

Vamos aplicar a propriedade display com o valor flex para o seletor da barra de navegação.

Isso ocorre porque a propriedade flex deve ser aplicada ao elemento pai dos elementos que desejamos tornar flexíveis. Neste caso, o elemento pai é a barra de navegação e os elementos filhos são o logo da Hashtag e a lista não ordenada.

Dessa forma, poderemos ajustar, alinhar, distribuir e organizar os elementos filhos da nossa barra de navegação de forma fácil e flexível.

nav {
    display: flex;
    padding: 15px 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

Ao abrir nossa página no navegador, já será possível observar algumas diferenças. Os elementos da nossa barra de navegação estarão alinhados lado a lado, e não mais um embaixo do outro.

Além disso, podemos usar a ferramenta do programador para abrir o Flexbox Editor. Basta selecionar a tag nav e, na janela Style, clicar sobre o ícone do Flexbox Editor.

Esse editor nos permite alterar várias propriedades do nosso flexbox, visualizando as transformações diretamente na página antes de implementá-las em nosso código.

Dentre essas propriedades, temos:

• flex-direction: define a direção principal em que os itens são colocados dentro do flex contêiner.
• flex-wrap: controla se os itens flexíveis devem ser dispostos em uma única linha ou várias linhas.
• align-content: define o alinhamento vertical dos elementos dentro do elemento pai.
• justify-content: controla o alinhamento horizontal dos elementos dentro do contêiner

Você pode testar cada uma dessas opções para se familiarizar e visualizar como cada uma altera o layout da barra de navegação. Para o nosso exemplo, utilizaremos apenas as propriedades align-items e justify-content.

A propriedade flex-wrap não será necessária para este caso, e a flex-direction também não, já que os itens já estão dispostos em uma única linha ordenada da esquerda para a direita.

Para alinhar verticalmente todos os nossos itens ao centro da barra de navegação, vamos definir o valor da propriedade align-items como center.

E, por fim, para a propriedade justify-content, vamos passar o valor space-between, para que os elementos fiquem distribuídos, cada um em uma ponta da barra de navegação, com todo o espaço restante entre eles.

Após fazer as alterações no Flexbox Editor, basta copiá-las para dentro do código no VS Code.

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  }

E nossa barra de navegação ficará assim:

Display da Lista Não Ordenada

Repare que nossa lista não ordenada ainda está com um elemento embaixo do outro. Para modificar o layout dessa lista, basta transformá-la em uma flexbox.

Assim, podemos utilizar as mesmas propriedades que acabamos de aprender para alinhar e posicionar cada item da lista presente nela.

Além disso, podemos passar a propriedade list-style com o valor none para remover a bolinha padrão que aparece ao lado do nome de cada elemento da lista. E adicionar a propriedade gap com o valor de 20px para criar espaçamento entre os elementos.

ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

Ajustes nas Âncoras

Para finalizar a estilização da nossa barra de navegação, precisamos estilizar as âncoras que correspondem a cada um dos itens dentro da lista não ordenada.

Para isso, precisaremos ajustar a cor da fonte, remover o sublinhado presente nelas, deixar todas as letras em maiúscula e em negrito.

Faremos isso criando um seletor para a tag <a> dentro do nosso arquivo CSS e passando para ele as propriedades color, text-decoration, text-transform e font-weight.

O text-decoration com o valor de none irá remover o sublinhado dos nossos elementos, o text-transform com uppercase será responsável por deixar todas as letras maiúsculas, e a font-weight com o valor de bold deixará as letras em negrito.

a {
    color: #112e61;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }

Com isso, finalizamos a estilização da nossa barra de navegação, deixando-a com um layout flexível!

Entendendo os Tipos de Display no CSS: Block, Inline, Inline-Block e Flex

O CSS é uma ferramenta essencial para criar layouts atraentes e responsivos em desenvolvimento web, e a propriedade display é um dos pilares para controlar como os elementos HTML se comportam na página. Neste artigo, exploraremos os principais tipos de display — block, inline, inline-block e flex — explicando suas características, quando usá-los e como aplicá-los na prática. Usaremos exemplos práticos com contêineres para demonstrar o comportamento de cada tipo, ajudando você a dominar layouts modernos e evitar erros comuns.

HTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agora

O que é a Propriedade display no CSS?

A propriedade display define como um elemento HTML é exibido na página, controlando seu fluxo, tamanho e posicionamento em relação a outros elementos. Os tipos mais comuns incluem block, inline, inline-block e flex, cada um com características específicas que impactam o layout. Além desses, existe o grid, que abordaremos brevemente como alternativa ao flex para layouts baseados em grades.

Display Block: Ocupando Todo o Espaço Horizontal

O display: block é o padrão para elementos como <div>, <p>, <h1> a <h6>. Suas principais características são:

• Ocupa toda a largura disponível: O elemento usa todo o espaço horizontal do contêiner pai, independentemente do conteúdo.
• Empilha verticalmente: Cada elemento block aparece em uma nova linha, forçando os elementos seguintes a ficarem abaixo.
• Aceita width e height: Você pode definir largura e altura explicitamente.

Exemplo prático:

<div class="container-block">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container-block .box {
  display: block;
  width: 60px;
  height: 70px;
  background-color: lightblue;
}

Resultado: Cada caixa (A, B, C) aparece em uma nova linha, ocupando 60px de largura e 70px de altura. Sem o width, cada caixa ocuparia toda a largura do contêiner (ex.: 100% da página).

Quando usar? Ideal para seções como cabeçalhos, parágrafos ou contêineres que precisam ocupar toda a largura ou ter dimensões específicas.

Display Inline: Elementos na Mesma Linha

O display: inline é o padrão para elementos como <span>, <a> e <img>. Suas características incluem:

• Ocupa apenas o espaço necessário: O elemento se ajusta ao tamanho do conteúdo (ex.: texto ou imagem).
• Fica na mesma linha: Elementos inline não quebram a linha, permitindo que outros elementos apareçam ao lado.
• Não aceita width e height: Propriedades como width e height são ignoradas.

Exemplo prático:

<div class="container-inline">
  <span class="box">A</span>
  <span class="box">B</span>
  <span class="box">C</span>
</div>

.container-inline .box {
  display: inline;
  background-color: lightgreen;
}

Resultado: As caixas A, B e C aparecem na mesma linha, com tamanhos ajustados ao conteúdo (ex.: 25px para A, 27px para C). Tentativas de definir width ou height não terão efeito.

Quando usar? Perfeito para elementos como links, trechos de texto ou ícones que devem fluir dentro de uma linha.

Display Inline-Block: A Combinação de Inline e Block

O display: inline-block combina características de inline e block:

• Fica na mesma linha: Como inline, os elementos aparecem lado a lado.
• Aceita width e height: Como block, permite definir dimensões específicas.
• Tamanho inicial ajustado ao conteúdo: Sem width, o elemento ocupa apenas o espaço necessário.

Exemplo prático:

<div class="container-inline-block">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container-inline-block .box {
  display: inline-block;
  width: 60px;
  height: 70px;
  background-color: lightcoral;
}

Resultado: As caixas A, B e C ficam na mesma linha, cada uma com 60px de largura e 70px de altura. Sem o width, elas se ajustariam ao tamanho do conteúdo, mas ainda ficariam lado a lado.

Quando usar? Ideal para criar layouts onde os elementos precisam de dimensões específicas, mas devem permanecer na mesma linha, como botões ou cartões.

Display Flex: Layouts Modernos e Responsivos

O display: flex transforma um contêiner em um flex container, controlando o comportamento de seus filhos (flex items). É ideal para layouts complexos e responsivos.

Características principais:

• Flexibilidade no posicionamento: Permite alinhar elementos horizontalmente (flex-direction: row) ou verticalmente (flex-direction: column).
• Controle de espaçamento: Propriedades como justify-content e align-items ajustam o alinhamento e a distribuição.
• Responsividade: Com flex-wrap: wrap, os elementos se ajustam automaticamente ao tamanho do contêiner, quebrando para a próxima linha quando necessário.

Exemplo prático:

<div class="container-flex">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.container-flex .box {
  width: 60px;
  background-color: lightyellow;
}
.container-flex .box:nth-child(1) { height: 100px; }
.container-flex .box:nth-child(2) { height: 120px; }
.container-flex .box:nth-child(3) { height: 50px; }

Resultado:

• As caixas A, B e C ficam na mesma linha, com alturas diferentes (100px, 120px, 50px).
• justify-content: space-between distribui os elementos com o máximo de espaço entre eles.
• align-items: center alinha as caixas verticalmente no centro do contêiner.
• flex-wrap: wrap garante que, se mais elementos forem adicionados e excederem a largura, eles passarão para a próxima linha automaticamente.

Propriedades úteis:

• flex-direction: row (padrão), column, row-reverse, column-reverse.
• justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly.
• align-items: flex-start, center, flex-end, stretch (padrão, faz os itens ocuparem toda a altura do contêiner, se não tiver height definido).

Quando usar? Perfeito para layouts responsivos, como menus de navegação, galerias de imagens ou cartões alinhados dinamicamente.

Comparação Rápida dos Tipos de Display

Dica Extra: Display Grid

Além dos tipos abordados, o display: grid é outra opção poderosa para layouts baseados em grades bidimensionais. Diferentemente do flex, que é unidimensional (controla uma linha ou coluna), o grid permite organizar elementos em linhas e colunas simultaneamente. Fique atento a tutoriais adicionais sobre grid para explorar suas possibilidades.

Conclusão

A propriedade display é a base para criar layouts eficientes no CSS. Com block, você organiza elementos em pilha; com inline, mantém tudo na mesma linha; com inline-block, combina controle de tamanho e alinhamento horizontal; e com flex, cria layouts modernos e responsivos com facilidade. Entender quando usar cada tipo é crucial para desenvolver interfaces intuitivas e adaptáveis. Experimente os exemplos apresentados, ajuste os códigos e pratique com diferentes configurações para dominar o CSS. Quer aprofundar seus conhecimentos? Confira os recursos e minicursos mencionados na descrição para continuar aprendendo!

Flexbox CSS – Avançando com Layouts Responsivos e Propriedades Avançadas

Já aprendemos as noções essenciais do Flexbox CSS, criando uma barra de navegação flexível com sombra, espaçamentos e alinhamentos precisos.

Agora vamos dar um passo além, explorando propriedades avançadas do Flexbox para construir layouts responsivos e dinâmicos. Nesta continuação, você entenderá como configurar um flex-container e seus flex-items, alinhar elementos nos eixos principal e cruzado, criar espaçamentos consistentes, ajustar direções, tornar layouts adaptáveis a diferentes telas e até reordenar elementos sem tocar no HTML.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Configurando o Ambiente

Para acompanhar, use o VS Code com a extensão Live Server, que permite visualizar alterações em tempo real. Abra a ferramenta de desenvolvedor do navegador (tecla F12) para inspecionar elementos e testar propriedades com o Flexbox Editor, uma ferramenta visual que facilita ajustes. O material inclui um arquivo HTML e um CSS externo (style.css), que usaremos para criar exemplos práticos.

Estrutura do Projeto

Vamos trabalhar com um novo exemplo HTML, inspirado na barra de navegação anterior, mas focado em demonstrar propriedades avançadas:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox CSS Avançado</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </section>
  </body>
</html>

A <section class="container"> será nosso flex-container, e as divs com class="flex-item" são os flex-items (filhos diretos do container). No CSS, começamos com um reset e estilos básicos para os itens:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.flex-item {
  width: 100px;
  color: white;
  background-color: brown;
  border: 2px solid black;
  text-align: center;
}
.flex-item:nth-child(1) { height: 100px; }
.flex-item:nth-child(2) { height: 150px; }
.flex-item:nth-child(3) { height: 200px; }
.flex-item:nth-child(4) { height: 250px; }

Nota: Apenas filhos diretos do flex-container são flex-items. Elementos aninhados, como um <p> dentro de um flex-item, não são afetados diretamente pelo Flexbox.

Ativando o Flexbox

Para transformar a <section> em um flex-container, usamos:

.container {
  display: flex;
}

Com display: flex, os flex-items são alinhados em uma linha (eixo horizontal), diferente do comportamento padrão de empilhamento em coluna. Isso cria a base para um layout flexível.

Alinhando com justify-content

O eixo principal (main axis) define a direção dos flex-items. Em display: flex, o eixo principal é horizontal. A propriedade justify-content alinha os itens nesse eixo, com opções como:

• flex-start: Itens no início.
• flex-end: Itens no final.
• center: Itens centralizados.
• space-between: Itens nas extremidades, com espaço igual entre eles.
• space-around: Espaço igual ao redor de cada item.
• space-evenly: Espaço uniforme entre itens e bordas.

Exemplo:

.container {
  display: flex;
  justify-content: space-evenly;
}

Com space-evenly, os itens são distribuídos com espaçamento uniforme, ideal para layouts equilibrados.

Alinhando com align-items

O eixo cruzado (cross axis) é perpendicular ao eixo principal (vertical, em um layout de linha). A propriedade align-items alinha os itens nesse eixo:

• flex-start: Itens no topo.
• flex-end: Itens na base.
• center: Itens centralizados verticalmente.

Exemplo:

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 400px; /* Define altura para visualizar o alinhamento vertical */
}

Com align-items: center, os itens ficam centralizados verticalmente dentro do container.

Mudando a Direção com flex-direction

A propriedade flex-direction altera o eixo principal:

• row: Linha (horizontal, padrão).
• column: Coluna (vertical).

Exemplo:

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 600px;
}

Com flex-direction: column, o eixo principal é vertical, justify-content alinha verticalmente, e align-items alinha horizontalmente, invertendo os papéis das propriedades.

Criando Espaçamento com gap

A propriedade gap adiciona espaçamento uniforme entre flex-items, eliminando a necessidade de margens individuais:

.container {
  display: flex;
  gap: 20px;
}

Com gap: 20px, cada item é separado por 20 pixels, mantendo o layout organizado.

Layouts Responsivos com flex-wrap

Para layouts que se adaptam a diferentes tamanhos de tela, usamos flex-wrap:

• nowrap: Itens ficam em uma linha (padrão).
• wrap: Itens quebram para novas linhas quando o espaço acaba.

Exemplo:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

Com flex-wrap: wrap, os itens descem para a próxima linha em telas menores, garantindo um layout responsivo. Use a ferramenta de responsividade (F12 > ícone de dispositivo) para testar.

Ajustando Itens Individualmente com align-self

A propriedade align-self permite que um flex-item tenha um alinhamento diferente no eixo cruzado:

.flex-item:nth-child(1) {
  align-self: flex-end;
}

Aqui, o primeiro item é alinhado na base do container, enquanto os outros seguem o align-items.

Controlando Tamanhos com flex-grow, flex-shrink, e flex-basis

Para gerenciar o tamanho dos flex-items, usamos:

• flex-basis: Tamanho inicial do item (substitui width em flex-direction: row).
• flex-grow: Quanto o item pode crescer para ocupar espaço extra.
• flex-shrink: Quanto o item pode encolher se faltar espaço.

Exemplo:

.flex-item:nth-child(1) {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 2;
}
.flex-item:nth-child(2) {
  flex-grow: 3;
}

• O primeiro item começa com 100px, cresce moderadamente (flex-grow: 1), e encolhe duas vezes mais que outros (flex-shrink: 2).
• O segundo item cresce três vezes mais (flex-grow: 3).

O atalho flex combina essas propriedades:

.flex-item:nth-child(3) {
  flex: 2 1 100px; /* grow: 2, shrink: 1, basis: 100px */
}

Reordenando com order

A propriedade order altera a ordem visual dos flex-items sem modificar o HTML (padrão: order: 0):

.flex-item:nth-child(1) {
  order: 4;
}
.flex-item:nth-child(2) {
  order: 1;
}

O primeiro item aparece por último (order: 4), e o segundo vem antes dos demais (order: 1), permitindo layouts dinâmicos.

Revisitando a Barra de Navegação

Vamos conectar com a barra de navegação da aula anterior, aplicando propriedades avançadas. O CSS original era:

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}
ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

Para torná-la responsiva, adicionamos flex-wrap:

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

Agora, em telas menores, o menu pode quebrar para a próxima linha. Para ajustar tamanhos, usamos flex-grow no logo:

nav img {
  flex-grow: 1;
  max-width: 150px;
}

Isso faz o logo ocupar espaço extra, mantendo a proporção.

Conclusão – Flexbox CSS – Noções Essenciais para um Layout Flexível

Até aqui, vimos como utilizar o Flexbox CSS para que você possa criar um layout flexível dentro das suas páginas HTML.

A partir disso, você será capaz de aplicar os conceitos aprendidos nessa aula para melhorar a construção das suas páginas, organizando os elementos de forma fácil e eficiente, dentro de um layout flexível.

Siga lendo para aprender sobre responsividade nos layouts com CSS Grid.

E se quiser ver esse conteúdo em formato de vídeo, assista à aula abaixo ou acesse o nosso canal do YouTube!

Layouts Responsivos com Flexbox e CSS Grid

Nesta última parte da nossa aula sobre Flexbox CSS, vamos aprender mais sobre layouts responsivos.

Exploraremos como usar CSS Grid com media queries para adaptar imagens e elementos do layout a diferentes tamanhos de tela, identificando breakpoints e aplicando técnicas como mobile-first e desktop-first.

Este conteúdo complementa o post anterior, focando em responsividade e na construção de layouts dinâmicos que não "quebram" em resoluções variadas.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Mobile-first vs. Desktop-first: Qual abordagem escolher?

Ao criar layouts responsivos, você pode adotar duas abordagens:

• Mobile-first: Desenvolva o layout para dispositivos móveis (ex.: 360px) e adicione ajustes para telas maiores (ex.: 1280px). Ideal quando a maioria do tráfego vem de dispositivos móveis.
• Desktop-first: Comece com o layout para desktops (ex.: 1920px) e adapte para telas menores. Útil para sites complexos com mais elementos visíveis em telas grandes.

A escolha entre as duas depende do público e do projeto. Verifique os dados de tráfego (ex.: 80% mobile) para priorizar.

Aqui no nosso exemplo, o layout inicial foi construído com desktop-first, mas precisa de ajustes para mobile.

Identificando Breakpoints e Usando Media Queries

Como encontrar os breakpoints ideais?
Breakpoints são pontos de mudança no layout, definidos com base no comportamento visual da página. Em vez de usar tamanhos fixos (ex.: 1280px, 720px), diminua a tela gradualmente nas ferramentas do desenvolvedor e observe onde o layout começa a "quebrar" (ex.: imagens muito grandes, textos sobrepostos).

Por exemplo, no nosso layout, problemas aparecem em:

• 1100px: Espaçamento entre cards fica desproporcional.
• 900px: Imagens ficam grandes demais.
• 600px: O menu do cabeçalho desalinha.

Para corrigir, usamos media queries no CSS.

O que é media query? Um media query aplica estilos condicionalmente com base na largura da tela.

Por exemplo:

@media (max-width: 1100px) {
  .cards {
    gap: 40px; /* Aumenta o espaçamento entre cards */
  }
}

Explicação:

• (max-width: 1100px): Aplica o estilo para telas de 0 a 1100px.
• Fora dessa faixa (>1100px), os estilos padrão (desktop) são usados.

Redimensionando imagens para responsividade

Como ajustar imagens em telas menores?
Imagens fixas (ex.: width: 400px) podem quebrar o layout em telas pequenas.

No nosso exemplo, a imagem da seção hero (veja os arquivos para download desta parte da aula) tem um atributo width="400".

Para torná-la responsiva faça o seguinte:

1. Remova o atributo width do HTML e adicione uma classe (ex.: hero-img).
2. No CSS, use max-width e width percentual:

.hero-img {
  width: 100%;
  max-width: 400px;
}
@media (max-width: 900px) {
  .hero-img {
    width: 50%;
  }
}

• width: 100%: A imagem ocupa o espaço disponível.
• max-width: 400px: Limita o tamanho máximo.
• Media query (900px): Reduz a imagem para 50% da largura em telas menores.

Agora a imagem vai encolher proporcionalmente, mantendo o layout fluido.

Transformando o menu do header para mobile

O menu do cabeçalho (<nav>) usa display: flex com a logo e links alinhados horizontalmente. Em telas menores (ex.: 600px), o layout quebra.

Para corrigir isso:

1. Adicione uma classe logo à imagem do cabeçalho e header-links à lista de links.
2. Ajuste o layout com flex-direction: column e reduza tamanhos:

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
  }
  .logo {
    max-width: 150px;
  }
  .header-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }
  .header-links a {
    margin-right: 16px;
  }
  .header-links a:last-child {
    margin-right: 0;
  }
}

• flex-direction: column: Empilha logo e links verticalmente.
• flex-wrap: wrap: Permite que os links quebrem em várias linhas.
• margin-right: Adiciona espaçamento entre links, exceto no último.
• gap: 15px: Reduz o espaçamento para telas menores.

Ajustando a seção de figures

A seção de figures usa display: flex. Para responsividade, adicionamos flex-wrap:

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 600px) {
  .figures {
    justify-content: center;
  }
}

• flex-wrap: wrap: Figures quebram para novas linhas em telas menores.
• justify-content: center: Centraliza os itens.

Resultado: As figures se reorganizam automaticamente (ex.: de 3 por linha em 1920px para 1 por linha em 360px).

Centralizando a seção de download

A seção de download (#download) contém texto que pode ser centralizado para melhor aparência em todas as resoluções:

#download {
  text-align: center;
}

Isso garante que o texto fique centralizado, independentemente do tamanho da tela.

Bônus: Usando CSS Grid para Layouts Flexíveis

Para a seção de cards, podemos substituir Flexbox por CSS Grid para garantir tamanhos iguais. No layout original, os cards têm tamanhos diferentes (ex.: 273px, 324px). Para uniformizá-los:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

• repeat(3, 1fr): Cria 3 colunas de tamanho igual (1 fração do espaço).

Para responsividade, usamos minmax para definir tamanhos mínimos e máximos:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  justify-items: center;
}
@media (max-width: 700px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  }
}

• auto-fit: Cria quantas colunas couberem.
• minmax(325px, 1fr): Cada coluna tem no mínimo 325px e no máximo 1 fração do espaço.
• justify-items: center: Centraliza os cards.
• max-width: 1200px: Limita a largura total.

Resultado:

• Em 1920px: 3 colunas de ~386px.
• Em 900px: 2 colunas de ~325px.
• Em 360px: 1 coluna de 325px.

Testando em diferentes dispositivos

Como garantir que o layout é responsivo?
Use as ferramentas do desenvolvedor (F12) para testar resoluções de 360px a 1920px.

Verifique se:

• Imagens não saem da tela.
• Textos estão legíveis e centralizados.
• Elementos se reorganizam sem sobreposição.

Com isso você vai ter noção de como chegar a um layout fluido que se ajuste automaticamente a cada dispositivo. Veja se os breakpoints são em 1100px, 900px, 700px e 600px e se propriedades como flex-wrap e minmax para responsividade natural.

Conclusão

Com Flexbox, CSS Grid e media queries, transformamos um layout estático em um layout responsivo, funcional em desktops, tablets e mobiles. Você aprendeu a:

• Identificar breakpoints observando onde o layout "quebra".
• Usar media queries para ajustes específicos (ex.: 1100px, 700px).
• Aplicar flex-wrap e minmax para layouts fluidos.
• Escolher entre mobile-first e desktop-first com base no público.
• Centralizar elementos e redimensionar imagens para telas menores.

Experimente essas técnicas nos seus projetos! E se quiser mais conteúdos como este, confira nosso blog. Lá você vai encontrar muito mais coisa legal pra aprender HTML e CSS!

E caso queira ver este conteúdo no formato de vídeo, dê play aqui embaixo ou acesse o nosso canal do YouTube!

Hashtag Treinamentos

Para acessar publicações de HTML e CSS, clique aqui!