Flexbox: a barra de topo e os botões · CSS do zero

O contêiner e os itens

.barra {
  display: flex;
}

Escrito no pai. Os filhos passam a ficar lado a lado e a se ajustar ao espaço.

<div class="barra">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>

Os dois eixos

.linha {
  display: flex;
  flex-direction: row; /* padrão: lado a lado */
}

.coluna {
  display: flex;
  flex-direction: column; /* empilhado */
}

O eixo principal é o da direção escolhida. O transversal é o outro. E esta é a fonte de confusão do flexbox: justify-content age no principal, align-items no transversal; então com column os dois trocam de sentido.

Distribuir e alinhar

.barra {
  display: flex;
  justify-content: space-between; /* no eixo principal */
  align-items: center; /* no transversal */
  gap: var(--espaco-3);
}

`justify-content`	O que faz
`flex-start`	tudo no começo (padrão)
`center`	tudo no meio
`space-between`	primeiro na ponta, último na outra
`space-around`	espaço igual em volta de cada item
`space-evenly`	espaço igual entre tudo, inclusive as pontas

`align-items`	O que faz
`stretch`	estica para a altura do maior (padrão)
`center`	centraliza no transversal
`flex-start`	alinha ao topo (em `row`)
`baseline`	alinha pela linha de base do texto

`gap`

.acoes {
  display: flex;
  gap: var(--espaco-3);
}

Espaço entre os itens, e só entre eles. A alternativa antiga era margin-right em cada filho, o que sobrava na última posição e obrigava a um :last-child { margin-right: 0 }. gap não tem esse problema.

A barra de topo do portfólio

A mesma nas seis páginas: nome à esquerda, menu à direita, tudo alinhado.

header .envelope {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-3);
  padding-block: var(--espaco-3);
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav a {
  color: var(--suave);
  text-decoration: none;
}

header nav a:hover {
  color: var(--tinta);
}

<header>
  <div class="envelope">
    <a href="index.html">Marina Sales</a>
    <nav aria-label="Menu principal">
      <ul>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="portfolio.html">Portfólio</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </div>
</header>

Repare em list-style: none com margin: 0 e padding: 0: as três linhas que transformam a lista da aula 4 do curso de HTML numa barra. A <ul> continua sendo uma lista para quem ouve a página - "lista com 6 itens" -, e só as bolinhas e o recuo somem.

E flex-wrap: wrap no menu: com seis itens, numa tela estreita eles precisam quebrar para a linha de baixo em vez de espremer as letras.

Os botões da abertura

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-5);
}

.acao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: 999px;
  background: var(--realce);
  color: var(--realce-tinta);
  text-decoration: none;
  font-weight: 600;
}

.acao--fantasma {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
}

Dois botões lado a lado: um cheio, um vazado. O inline-flex no próprio botão é o que alinha o texto com um ícone ou uma seta dentro dele.

Quebrar em várias linhas

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

As etiquetas de tecnologia de um projeto - "html", "css", "git" - se acomodam sozinhas: quatro numa linha larga, duas numa estreita, sem uma media query.

Para blocos maiores, o valor de partida entra na conta:

.cartoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
}

.cartoes > * {
  flex: 1 1 280px;
}

flex: 1 1 280px quer dizer: pode crescer, pode encolher, e o tamanho de partida é 280px. Na prática, os cartões se acomodam sozinhos: três por linha numa tela larga, dois numa média, um no celular.

O rodapé

footer .envelope {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-5);
  padding-block: var(--espaco-6);
}

footer nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

Aqui o column aparece: as colunas do rodapé são listas empilhadas, e o flex de fora as põe lado a lado. Com flex-wrap: wrap, no celular elas voltam a empilhar.

Centralizar de vez

.centro {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Centralizar na vertical era, por anos, um dos problemas mais chatos do CSS. Hoje são três linhas - e é o que faz a abertura ocupar a tela inteira no primeiro carregamento, se você quiser esse efeito.

Ordem visual e ordem real

.item {
  order: 2;
}
.item-primeiro {
  order: 1;
}

order muda a ordem na tela, e não no HTML.

No portfólio

O layout começa a existir:

a barra de topo com nome à esquerda e menu à direita, nas seis páginas;
list-style: none + margin: 0 + padding: 0 nas listas que viraram barra;
os dois botões da abertura, um cheio e um vazado, com flex-wrap;
as etiquetas de tecnologia com wrap e gap;
o rodapé em colunas que empilham no celular;
a ficha técnica (<dl>) de cada projeto em duas colunas, com flex e wrap.

Depois estreite a janela devagar, de 1400px até 360px. Nada pode espremer, vazar ou criar rolagem horizontal - e você ainda não escreveu nenhuma media query.

Exercícios

Monte a barra de topo com nome à esquerda e menu à direita, nas seis páginas.
Faça os dois botões da abertura ficarem lado a lado, e quebrarem no celular.
Alinhe as etiquetas de tecnologia com wrap e gap.
Monte o rodapé em três colunas que viram uma no celular.
Troque flex-direction para column numa das barras e observe o que justify-content passa a fazer.
Estreite a janela de 1400px a 360px devagar. Anote em que largura cada bloco quebrou - você vai precisar desses números na aula 9.

Referências

Flexbox - MDN - o guia completo, em português
A Complete Guide to Flexbox - CSS-Tricks - a referência visual que todo mundo consulta
Flexbox Froggy - jogo para praticar, em português