Rows with Flexbox · Linhas com Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Português
Colocando caixas em uma fileira
- Por padrão, caixas empilham para baixo. Frequentemente você quer elas lado a lado.
- Flexbox é a maneira fácil de fazer isso.
- Coloque
display: flex;no container — a caixa que contém as outras — e seus filhos se alinham em uma linha.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Português
Espaçando-os
- Assim que uma caixa tem
display: flex;, você controla como seus filhos se espalham. justify-content: space-between;os afasta, com espaços entre eles.gap: 12px;adiciona um espaço uniforme entre cada filho.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Português
Erros comuns
display: flexvai no container, não nos itens.justify-contentespaça os itens ao longo da linha.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Português
Agora você tenta
display: flexvai no container, não nos itens.- Transforme uma caixa em uma linha, depois espalhe seus filhos.
Explore · Explorar
Flexbox lays out a row · Flexbox organiza uma fileira
justify-content spaces items along the row; align-items across it. · justify-content espaça itens ao longo da fileira; align-items através dela.
Put the three boxes side by side. Add display: flex; to the .row rule. · Coloque as três caixas lado a lado. Adicione display: flex; à regra .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Espalhe as caixas uniformemente pela fileira. Adicione justify-content: space-between; à regra .row.