Ou seja, aqui vou mostrar como usar layouts Flexbox para criar cabeçalhos de alta qualidade para sites. Compartilharei algumas dicas e, ao final, demonstrarei meu projeto, criado especificamente para este material. Portanto, se você está realmente interessado no assunto que decidi levantar aqui, com certeza deveria ler este artigo até o fim.
Estou assumindo que você conhece os fundamentos do layout Flexbox. Aqui , por precaução, está meu artigo escrito para quem deseja aprender mais sobre a propriedade CSS
flex.
Introdução
Primeiro, vamos ter certeza de que você e eu chamamos o "cabeçalho do site" ou "cabeçalho do site" da mesma coisa. O cabeçalho do site é um dos primeiros elementos da página que um usuário vê ao visitar um site. Geralmente contém o logotipo ou nome do site, bem como links de navegação. Dê uma olhada na figura a seguir.
Logotipo do site, links de navegação e contêiner da parte do cabeçalho
Independentemente do design da parte do cabeçalho do site, seus elementos principais são o logotipo e a lista de links.
Tecnologia Flexbox em ação
Quando o layout do cabeçalho de um site é criado usando a tecnologia Flexbox, todos os itens do mesmo nível são alinhados em uma única linha. Então, tudo o que resta é usar a propriedade
justify-contentpara alinhar os elementos, distribuindo o espaço livre entre eles.
Aqui está o código de marcação:
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
Aqui estão os estilos:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
Não é nada complicado, certo? Bem, para um título tão simples, é. Mas, na prática, as coisas podem ser muito mais complicadas.
Contêiner de cabeçalho de página
A marcação do cabeçalho da página descrita na seção anterior não contém um elemento de contêiner interno que contém elementos que representam o logotipo e links de navegação. Em telas grandes, usar esse layout pode ser problemático.
Layout do cabeçalho da página criado sem um container interno (acima) e usando um container (abaixo)
Observe que o cabeçalho da primeira página é muito largo porque o container interno não foi usado quando foi criado. Mas o segundo layout parece muito melhor. Portanto, o código HTML do exemplo anterior deve ser reescrito da seguinte forma:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
E os estilos flexíveis precisam ser aplicados ao elemento
.site-header__wrapper:
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
Usando a propriedade flex-wrap
Uma propriedade
flex-wrapé um tipo de mecanismo de segurança CSS. Se o tamanho da tela for pequeno, é possível que você tenha que usar a rolagem horizontal para trabalhar com a parte do cabeçalho da página. Isto é o que parece.
Para trabalhar com o título da página, você precisa usar a rolagem horizontal. Acontece que a propriedade flex-wrap não é usada aqui: wrap
Como você pode ver, será inconveniente trabalhar com essa página. Portanto, não se esqueça da propriedade
flex-wrap!
Explorar diferentes opções de layout para seções de cabeçalho de página
O que eu gosto nos layouts do Flexbox é que eles facilitam o suporte a diferentes opções de design para seções de cabeçalho de páginas. Nesta seção, com base no exemplo acima, explorarei as possibilidades de expandir o layout adicionando novos elementos a ele, como botões e campos de pesquisa. Imediatamente, desejo explorar maneiras de alterar a ordem de exibição dos filhos do cabeçalho da página.
▍ Variante número 1
Primeira versão da parte do cabeçalho da página
Um botão foi adicionado a este layout, colocado após o bloco de links de navegação. Como fazer isso? Preciso formatá-lo como um link colocado dentro do elemento
<nav>? Ou talvez devesse ser um elemento separado? Eu farei exatamente isto.
Aqui está o HTML da minha ideia:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Nesse caso, a distância entre os elementos não pode ser definida usando a propriedade
justify-content: space-between. Em vez disso, usarei a propriedade para alinhar o bloco de links margin-left: auto. Isso empurrará links e botões para o lado direito do contêiner.
Elementos, graças a margin-left: auto, são pressionados no lado direito do contêiner
Separar o botão do bloco de link é valioso para layouts móveis, onde, por exemplo, você pode precisar sair do botão e apresentar o bloco de link como um menu suspenso.
Cabeçalho da página em desktop e celular
▍ Opção número 2
A segunda variante da parte do título da página
Aqui, expandimos os recursos da parte do título da página adicionando um campo de pesquisa a ela. Ele ocupa o espaço livre deixado após a colocação de outros elementos na página. Com layouts Flexbox, isso pode ser obtido aplicando a propriedade
flex.
Aqui está a marcação:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Este é o estilo aplicado à caixa de pesquisa:
.search {
flex: 1;
}
Isso é tudo! Agora o campo preencherá o espaço vazio entre o logotipo e o bloco de link. No entanto, essa abordagem tem algumas limitações. Em telas pequenas, o cabeçalho da página terá a aparência abaixo.
Cabeçalho da página em uma tela pequena
A largura do campo de pesquisa não deve ser inferior a um determinado tamanho. Caso contrário, será difícil inserir texto nele. Abaixo estão várias soluções para este problema.
Resolvendo o problema causado pela diminuição da largura do campo de busca em telas pequenas,
gosto mais da segunda opção, pois ao utilizá-la o bloco de links não fica oculto muito cedo. Em geral, posso dizer que me esforço para não ocultar o elemento, caso ele não interfira na correta exibição do layout.
▍ Opção número 3
A terceira versão da parte do título
Esta é a mesma marcação da primeira versão do título. Mas aqui a ordem de exibição dos elementos na tela foi alterada. Como fazer isso? Você pode decidir usar a propriedade aqui
order. Vamos explorar essa ideia.
Aqui está o HTML:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Aqui estão os estilos:
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
E é assim que se parece o resultado da renderização de tudo isso.
Usar a propriedade justify-content: space-between não alinha o logotipo ao centro. Esta propriedade distribui apenas o espaço livre entre os elementos.A
solução para este problema é atribuir cada elemento filho ao cabeçalho da página com uma propriedade
flex: 1. Isso distribuirá o espaço entre os elementos.
Aqui estão os estilos:
.brand,
.nav,
.button {
flex: 1;
}
Distribuição uniforme de espaço livre entre os elementos da parte do título da página
No entanto, algo estranho aconteceu com o botão. Devido à aplicação da propriedade
flex: 1, tornou-se muito longo. A única maneira de corrigir isso é colocar o botão em um elemento de contêiner:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
Com essa abordagem, você pode alinhar o logotipo e o botão ao centro:
.logo {
text-align: center;
}
/* . - , , . */
.button-wrapper {
text-align: end; /* end - , LTR-, , right */
}
Elementos de alinhamento
Esta abordagem, no entanto, também não é ideal. Lembre-se de que se houver mais links no bloco de navegação, isso causará problemas. Ou seja, aqui é necessário que a largura do bloco de navegação não exceda um determinado tamanho. Aqui está um exemplo em que o logotipo perde seu alinhamento central.
O logotipo não está mais centralizado,
como você pode ver, na imagem anterior, o logotipo não está mais centralizado. Vale lembrar sobre esta característica da abordagem acima para não enfrentar problemas inesperados.
Agora que exploramos as diferentes opções para projetar layouts de cabeçalho para sites e falamos sobre como criar esses layouts, vamos dar uma olhada em algumas ideias importantes que podem nos ajudar na criação de seções de cabeçalho para páginas.
Dicas para projetar cabeçalhos para páginas baseadas em Flexbox
▍ A propriedade flex-basis
Eu prefiro usar uma propriedade
flex-basis: 100%quando o elemento precisa ter largura total em dispositivos móveis. Por exemplo, se estamos falando de um bloco importante de links de navegação que não podem ser ocultados.
O resultado da aplicação da propriedade flex-basis é 100%
Aplicar esta propriedade, se você olhar para a figura anterior, pode parecer uma questão simples. Na realidade, este não é o caso. Normalmente, o cabeçalho de um site pode ter preenchimento e, se ajustarmos o elemento para preencher a largura total, isso não acontecerá até que o preenchimento seja sobreposto. No entanto, removê-los é impraticável, pois afetará outros elementos do layout.
Veja como resolver esse problema:
- Vamos adicionar
flex: 1 0 100%ao bloco de navegação. - Vamos alterar, se necessário, sua propriedade
order. Às vezes, temos que cuidar de outros elementos também, então precisamos ter certeza de que a caixa de navegação é o último elemento. - Vamos ajustar as margens do bloco de navegação usando um valor negativo igual ao tamanho das margens internas. Isso permitirá que este bloco preencha toda a largura da página.
- Vamos ajustar o preenchimento para que haja um pouco de "ar" no elemento.
- Finalmente, usaremos a propriedade
justify-content: centerpara centralizar os elementos de navegação (embora isso não seja particularmente importante).
Aqui estão os estilos (entre colchetes estão os itens da lista acima aos quais eles se relacionam):
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
E aqui está como será a aplicação passo a passo dos estilos acima à lista de elementos de navegação.
Elementos de estilo passo a passo
▍ Ajustando a distância entre os elementos
Agora que os navegadores Chrome e Firefox suportam a propriedade
gap, é muito fácil ajustar o espaçamento entre os itens flexíveis. Dê uma olhada na próxima seção de cabeçalho da página.
Usando a propriedade gap
Para ajustar a distância entre os itens selecionados na figura, você precisa adicionar uma propriedade ao item flexível pai
gap: 1rem. Sem usar essa propriedade, teríamos que estilizar os elementos da mesma maneira.
/* */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* */
.site-header {
/* flexbox-*/
gap: 1rem;
}
Se você usar uma propriedade
gap, lembre-se de que você precisará preparar e um fallback, caso não seja compatível com o navegador no qual a página é exibida. Escrevi um artigo detalhado sobre isso .
Isso encerra a conversa, mas antes de partirmos, deixe-me mostrar a vocês um dos meus projetos.
Projeto Headers-css
Aqui está um exemplo de cabeçalhos de página que são criados dentro do projeto headers-css.
Cabeçalhos de páginas de headers-css
Decidi fazer um projeto no qual são coletados templates para partes de cabeçalhos de sites, projetados como páginas separadas. Agora, se eu precisar de um elemento semelhante, posso encontrá-lo rapidamente e integrá-lo em um novo projeto. Ou seja, criei 17 variações do cabeçalho da página. Eu pretendo expandir este projeto em um futuro próximo. Enquanto trabalhava nesses elementos, prestei atenção especial ao seguinte:
- Flexibilidade.
- Design totalmente responsivo.
- Usando Sass, que torna mais fácil editar meus modelos (embora nesta área eu ainda precise refatorar um pouco o código).
- Acessibilidade (se você encontrar algo errado - adicione uma entrada para o rastreador de tarefas do projeto).
Aqui está uma página para ver o projeto headers-css em ação. E aqui está o repositório GitHub do projeto.
Como você cria as partes do cabeçalho de suas páginas da web?
