Aprenda CSS Flexbox em 5 minutos

Uma introdução rápida ao popular módulo de layout

Nesta publicação, você aprenderá os conceitos básicos do CSS Flexbox, que se tornou uma habilidade imprescindível para os desenvolvedores e designers da web nos últimos dois anos.

Usaremos uma barra de navegação como exemplo, pois este é um caso de uso muito típico para o Flexbox. Isto irá apresentá-lo às suas propriedades mais utilizadas do módulo, enquanto deixa de fora aqueles que não são tão críticos.

Também estou criando um curso gratuito no Flexbox. Se você quiser acesso antecipado, você pode deixar o seu e-mail aqui e eu o enviarei uma vez que estiver pronto.

Agora vamos começar!

Seu primeiro layout do Flexbox

Os dois componentes principais de um layout Flexbox são o contêiner e os itens .

Aqui está o HTML para o nosso exemplo, que contém um recipiente com quatro itens:

 <nav class = "container"> 
<div> Home </ div>
<div> Pesquisa </ div>
<div> Sair </ div>
</ nav>

Antes de transformarmos isso em um layout do Flexbox, os divs seriam empilhados um do outro como este:

Eu adicionei um pouco de estilo, mas isso não tem nada a ver com o Flexbox.

Para transformar isso em um layout Flexbox, simplesmente daremos ao contêiner a seguinte propriedade CSS:

 .container { 
exibir: flex;
}

Isso posicionará automaticamente os itens bem ao longo do eixo horizontal.

Se você deseja verificar o código real, pode dirigir-se a este campo de jogos Scrimba.

Agora, vamos minimizar esses itens em torno de um pouco.

Justificar conteúdo e Alinhar itens

Justify-content e align-items são duas propriedades CSS que nos ajudam a distribuir os itens no recipiente. Eles controlam como os itens são posicionados ao longo do eixo principal e eixo transversal .

No nosso caso (mas não sempre), o eixo principal é horizontal e o eixo transversal é vertical:

Neste artigo, apenas analisaremos o justify-content , como eu descobri que estava usando este muito mais do que align-items . No entanto, no meu próximo curso, vou passar por ambas as propriedades em detalhes.

Vamos concentrar todos os itens ao longo do eixo principal usando o justify-content :

 .container { 
exibir: flex;
justify-content: center;
}

Ou podemos configurá-lo para space-between , o que irá adicionar espaço entre os itens, como este:

 .container { 
exibir: flex;
justify-content: space-between;
}

Aqui estão os valores que você pode definir para justify-content:

  • flex-start ( padrão )
  • flex-end
  • Centro
  • espaço entre
  • espaço
  • espaço-uniformemente

Eu recomendo que você brinque com estes e veja como eles jogam na página. Isso deve lhe dar uma compreensão adequada do conceito.

Controlando um único item

Nós também podemos controlar itens únicos. Digamos que, por exemplo, queremos manter os dois primeiros itens no lado esquerdo, mas mova o botão de logout para o lado direito.

Para fazer isso, usaremos a boa técnica antiga de configuração da margem para auto .

 .sair { 
margem esquerda: auto;
}

Se quisermos que tanto o item de search como o item de logout sejam empurrados para o lado direito, simplesmente adicionaremos a margin-left ao item de search .

 .search { 
margem esquerda: auto;
}

Ele irá empurrar o item de pesquisa tão longe para o lado direito quanto possível, o que novamente irá empurrar o item de logout com ele:

A propriedade flex

Até agora, nós só possuímos itens de largura fixa. Mas e se quisermos que eles respondam? Para conseguir isso, temos uma propriedade chamada flex . Isso torna muito mais fácil do que a forma antiga de usar porcentagens.

Nós simplesmente direcionaremos todos os itens e daremos um valor flex de 1 .

 .container> div { 
flex: 1;
}

Como você pode ver, ele estica os itens para preencher o recipiente inteiro.

Em muitos casos, você provavelmente quer que um dos itens ocupe a largura extra e, assim, apenas configure um se eles tiverem largura flexível. Podemos, por exemplo, fazer com que o item de search ocupe todo o espaço extra:

 .search { 
flex: 1;
}

Antes de terminar este artigo, quero mencionar que a propriedade flex é, na verdade, uma abreviação de três propriedades: flex-grow , flex-shrink e flex-basis . No entanto, aprender aqueles leva mais de cinco minutos, então está fora do escopo deste tutorial.

Se você estiver interessado em aprendê-los, porém, vou explicar as três propriedades completamente no meu próximo curso. Agora que você aprendeu o básico, você definitivamente estará pronto para seguir meu curso completo e se tornar um mestre da Flexbox.

Estou criando um curso CSS Flexbox gratuito. Se você quiser acesso antecipado, deixe seu e-mail aqui e eu lhe darei acesso antecipado assim que o curso estiver pronto.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *