Aprenda tudo sobre Flexbox CSS e compreenda os conceitos essenciais para criar um layout flexível em suas páginas.
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:
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.
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.
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.
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.
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.
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.
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;
}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.
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:
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:
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;
}
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!
Na aula de hoje, mostrei 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.
Para acessar publicações de HTML e CSS, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador