O Guia Definitivo do Flexbox
Aprenda CSS Flexbox do início. Este guia cobre todas as áreas principais do Flexbox com exemplos e dicas práticas.
Visão Geral
O Flexbox Layout, oficialmente reconhecido como CSS Flexible Box Layout Module, é um modelo de layout em CSS.
Flexbox é um layout unidimensional, o que significa que ele organiza os itens em uma única dimensão por vez, seja como uma linha ou como uma coluna, mas não ambas ao mesmo tempo. Isso contrasta com o modelo bidimensional — CSS Grid Layout, que organiza os itens em duas dimensões simultaneamente (linhas e colunas juntas).
Flexbox foi introduzido como uma alternativa aos floats CSS para definir a aparência geral de uma página web. Flexbox traz muitos benefícios; em particular, com ele é possível controlar o alinhamento, a direção, a ordem e o tamanho dos itens.
Os itens dentro de um flex container:
- podem ser organizados em qualquer direção (para a esquerda, para a direita, para baixo ou até para cima) (flex-direction).
- podem ter ordem direta (esquerda para direita) ou invertida (direita para esquerda).
- podem ter largura e altura "flex" para preencher o espaço disponível (flex-item).
- podem ser configurados para colapsar ou expandir dinamicamente ao longo do eixo principal, preservando ao mesmo tempo o tamanho do eixo transversal secundário.
- podem ser organizados linearmente ao longo do eixo principal ou agrupados em múltiplas linhas ao longo do eixo transversal.
Flexbox é relativamente novo, mas hoje conta com excelente suporte nos navegadores.
(Saiba mais sobre suporte e compatibilidade de navegadores).
Fundamentos do Flexbox
Ao trabalhar com Flexbox, é necessário pensar em termos de dois eixos — o eixo principal e o eixo transversal — e distinguir entre flex containers e flex items.
Eixo Principal e Eixo Transversal
Flexbox é um layout orientado a um único eixo; ele possui um eixo principal e um eixo transversal. Isso significa que os itens são dispostos ao longo do eixo principal ou do eixo transversal. O eixo transversal é sempre perpendicular ao eixo principal.
O eixo principal é definido pela propriedade flex-direction, que possui os seguintes valores:
- row
- row-reverse
- column
- column-reverse
Se a propriedade flex-direction for especificada com os valores row ou row-reverse, o eixo principal será horizontal, ou seja, correrá ao longo da linha na direção inline. E o eixo transversal correrá ao longo das colunas.
Se a propriedade flex-direction for especificada com os valores column ou column-reverse, o eixo principal será vertical, ou seja, correrá do topo da página até a parte inferior na direção de bloco. Quanto ao eixo transversal, ele correrá ao longo das linhas.
Veja esta figura para entender melhor o conceito por trás do eixo do Flexbox.
- main axis — O eixo principal de um flex container é o eixo ao longo do qual os flex items são posicionados.
- main-start | main-end — Os flex items são dispostos dentro do container a partir de main-start em direção a main-end.
- main size — A largura ou altura de um flex item na dimensão principal é o tamanho principal do item.
- cross axis — O eixo perpendicular ao eixo principal, cuja direção depende da direção do eixo principal (horizontal ou vertical).
- cross-start | cross-end — As linhas flex são preenchidas com itens e colocadas no container a partir do lado cross-start do flex container em direção ao lado cross-end.
- cross size — A largura ou altura de um flex item na dimensão transversal é o tamanho transversal do item.
Fonte: W3.org
Flex Containers e Items
O flex container é um elemento pai que agrupa um conjunto de elementos filhos, os flex items. Na maioria dos casos, o container define o layout e a posição de seus flex items; entretanto, os flex items podem ser manipulados individualmente.
Para transformar um elemento HTML em flex container, deve-se usar a propriedade display com os valores flex (flex container de nível bloco) ou inline-flex (define um flex container de nível inline). Caso contrário, o navegador ignorará todas as propriedades do Flexbox utilizadas.
Flexbox container
.container {
display: flex; /* or inline-flex*/
}Propriedades do Flex Container
A propriedade flex-direction
A propriedade flex-direction é usada para criar layouts em linha e em coluna. Ela especifica as direções do eixo principal do flex container e define a ordem em que os itens aparecem.
A propriedade flex-direction possui os seguintes valores:
- row — os itens são exibidos ao longo da linha da esquerda para a direita.
- row-reverse — os itens são exibidos da direita para a esquerda.
- column — os itens são exibidos verticalmente de cima para baixo.
- column-reverse — os itens são exibidos verticalmente de baixo para cima.
Exemplo da propriedade flex-direction:
exemplo da propriedade flex-direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #8ebf42;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<h3>row-reverse</h3>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>No nosso exemplo, os itens estão organizados em ordem invertida. Altere os valores da propriedade flex-direction (row, column, column-reverse) para ver como a aparência dos itens muda.
Nota: row e row-reverse dependem do modo de escrita; portanto, em contextos rtl (direita para esquerda) eles serão invertidos respectivamente.
A propriedade flex-wrap
Por padrão, todos os flex items cabem em uma única linha e, se forem mais largos que o container, irão transbordar. Para evitar isso, deve-se usar a propriedade flex-wrap para quebrar os itens em novas linhas.
A propriedade pode aceitar os seguintes valores:
- nowrap (padrão) — os flex items são exibidos em uma única linha; por padrão, eles se ajustam à largura do flex container.
- wrap — os flex items são exibidos em múltiplas linhas se necessário, da esquerda para a direita e de cima para baixo.
- wrap-reverse — os flex items são exibidos em múltiplas linhas se necessário, da esquerda para a direita e de baixo para cima.
Nota: A propriedade depende do modo de escrita; portanto, em contextos rtl (direita para esquerda) eles serão invertidos respectivamente.
A propriedade justify-content
A propriedade justify-content é usada para definir o alinhamento horizontal dos itens ao longo do eixo principal. Ela ajuda a distribuir o espaço livre restante entre os flex items no eixo principal.
Os valores para justify-content são os seguintes:
- flex-start (valor padrão) — os itens são posicionados no início do container.
- flex-end — os itens são posicionados no final do container.
- center — os itens são posicionados no centro do container.
- space-between — os itens são distribuídos uniformemente (com espaço entre eles) na linha; o primeiro item fica na linha inicial e o último item fica na linha final.
- space-around — os itens são exibidos com espaço antes, entre e depois deles.
- space-evenly — os itens são distribuídos de forma que o espaçamento entre quaisquer dois itens (e o espaço nas bordas) seja igual.
Exemplo da propriedade justify-content:
propriedade justify-content, exemplos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
padding: 10px;
margin-bottom: 20px;
background-color: #1faadb;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-container > div {
width: 28%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container > div.item-two {
width: 18%;
}
</style>
</head>
<body>
<p>flex-start</p>
<div class="flex-container flex-start">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>flex-end</p>
<div class="flex-container flex-end">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>center</p>
<div class="flex-container center">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-between</p>
<div class="flex-container space-between">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-around</p>
<div class="flex-container space-around">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
</body>
</html>Altere o valor da propriedade justify-content para ver como os itens são alinhados.
A propriedade align-items
A propriedade align-items é usada para alinhar itens ao longo do eixo transversal. É o oposto da propriedade justify-content, que alinha os itens ao longo do eixo principal.
Os valores para align-items são os seguintes:
- stretch (padrão) — os itens são esticados para preencher o container.
- flex-start — os itens são empilhados no início do eixo transversal do container.
- flex-end — os itens são empilhados no final do eixo transversal do container.
- center — os itens são empilhados no centro do eixo transversal.
- baseline — os itens são alinhados de acordo com suas linhas de base.
Nota: Se a altura do flex container for limitada, o valor stretch pode fazer com que o conteúdo do flex item transborde.
Exemplo da propriedade align-items:
propriedade align-items, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center; /* Use another value to see the result */
height: 250px;
padding: 15px;
background-color: #1faadb;
}
.flex-container > div {
width: 15%;
height: 100%;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one {
height: 60%;
}
.flex-container .three {
height: 40%;
}
.flex-container .four {
height: 70%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>No nosso exemplo, usamos o valor center para centralizar os itens no eixo transversal. Experimente outros valores e veja o resultado.
A propriedade align-content
A propriedade align-content é usada para alinhar as linhas de um flex container dentro dele quando há espaço extra no eixo transversal, assim como justify-content alinha itens individuais dentro do eixo principal.
Nota: A propriedade align-content não funciona quando há apenas uma linha no flex container.
Os valores para align-content e seus significados são os seguintes:
- stretch (padrão) — as linhas são esticadas para ocupar o espaço disponível.
- flex-start — as linhas são agrupadas no início do container.
- flex-end — as linhas são agrupadas no final do container.
- center — as linhas são agrupadas no centro do container.
- space-between — as linhas são distribuídas uniformemente; a primeira linha fica no início do container e a última fica no final.
- space-around — as linhas são distribuídas uniformemente com espaço igual ao redor de cada linha.
Exemplo da propriedade align-content:
exemplo da propriedade align-content
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end/* Use another value to see the result */;
min-height: 250px;
padding: 10px;
background-color: #1faadb;
}
.flex-container>div {
width: 45%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one,
.flex-container .nine {
width: 23%;
}
.flex-container .two,
.flex-container .six {
width: 9%;
}
.flex-container .three {
width: 25%;
}
.flex-container .four {
width: 35%;
}
.flex-container .five,
.flex-container .eleven {
width: 32%;
}
.flex-container .seven,
.flex-container .ten {
width: 6%;
}
</style>
</head>
<body>
<p>flex-end</p>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
</div>
</body>
</html>A propriedade gap
A propriedade gap define o espaço entre os flex items (as calhas), sem adicionar espaço nas bordas externas do container. É uma alternativa mais limpa a definir margin em itens individuais, pois nunca produz uma lacuna indesejada antes do primeiro item ou depois do último. Você pode passar um único valor para espaçamento igual em linhas e colunas, ou dois valores (row-gap column-gap).
propriedade gap, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap column-gap */
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>A propriedade flex-flow
Esta é uma propriedade abreviada para as propriedades individuais flex-direction e flex-wrap, que juntas definem os eixos principal e transversal do flex container. O valor padrão é row nowrap.
Nota: As direções de flex-flow são sensíveis ao modo de escrita; portanto, em contextos rtl (direita para esquerda) o conteúdo será invertido respectivamente.
Exemplo da propriedade flex-flow:
propriedade flex-flow, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap; /* Use another value to see the result */
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>Você pode escolher outro valor para ver como a posição dos itens muda.
Propriedades dos Flex Items
A propriedade order
Por padrão, os itens são dispostos na ordem em que aparecem no código-fonte (começando do grupo ordinal de menor número e avançando). Para alterar a ordem dos itens no flex container, utiliza-se a propriedade order.
A propriedade order define a ordem dos flex items atribuindo-os a grupos ordinais. Ela recebe um único valor inteiro, que define o grupo ordinal ao qual o flex item pertence. O valor padrão é 0.
Exemplo da propriedade order:
propriedade order do Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
.item-one {
order: 1;
}
.item-four {
order: -1;
}
.item-five {
order: 0;
}
.item-three {
order: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one">1</div>
<div class="item-two">2</div>
<div class="item-three">3</div>
<div class="item-four">4</div>
<div class="item-five">5</div>
</div>
</body>
</html>A propriedade align-self
A propriedade é usada para alinhar itens individualmente dentro do flex container. Os flex items são alinhados no eixo transversal da linha do flex container (assim como justify-content, mas na direção perpendicular). Quando definida, a propriedade align-self substitui o alinhamento especificado por align-items.
Nota: Se a margem no eixo transversal de qualquer item for definida como auto, o align-self será ignorado.
A propriedade align-self possui os mesmos valores que align-items. Eles estão listados abaixo para sua comodidade.
- stretch (padrão) — os itens são esticados para preencher o container.
- flex-start — os itens são empilhados no início do eixo transversal do container.
- flex-end — os itens são empilhados no final do eixo transversal do container.
- center — os itens são empilhados no centro do eixo transversal.
- baseline — os itens são alinhados de forma que suas linhas de base estejam alinhadas.
Exemplo da propriedade align-self:
exemplo da propriedade align-self
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
height: 300px;
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
height: 80%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
div.item-two {
width: 20%;
}
div.item-three {
align-self: flex-end;
height: 80px;
margin: 0 10%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
<div class="item-four"></div>
</div>
</body>
</html>A propriedade flex-grow
A propriedade flex-grow define a capacidade de um item de crescer se necessário. Ela define o fator de crescimento flex (em relação aos demais itens dentro do container), que especifica o espaço que o item deve ocupar no container ao distribuir espaço positivo.
A propriedade recebe um valor sem unidade que serve como proporção.
Nota: O valor não pode ser um número negativo.
Se todos os itens no container tiverem o mesmo valor para flex-grow (por exemplo, 1), todos os itens terão o mesmo tamanho no container.
Se o tamanho de um dos flex items for diferente (por exemplo, 2), esse item ocupará o dobro do espaço em relação ao tamanho dos outros itens (cujo tamanho está definido como 1).
Exemplo da propriedade flex-grow:
propriedade flex-grow, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
margin-bottom: 20px;
}
.flex-container div {
flex-grow: 0.2;
padding: 30px 5px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-grow: 5;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div><span>5</span>
</div>
</div>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Recomendamos usar a propriedade abreviada flex em vez de flex-grow para controlar a flexibilidade, pois ela redefine corretamente quaisquer componentes não especificados para acomodar casos de uso comuns.
A propriedade flex-shrink
A propriedade flex-shrink é definida para permitir que um flex item encolha. Ela especifica o espaço que o item deve ocupar no container quando espaço negativo é distribuído.
A propriedade recebe um valor sem unidade.
Nota: O valor não pode ser um número negativo.
Por padrão, todos os flex items podem ser encolhidos, mas se definirmos o valor como 0 (não encolher) eles preservarão o tamanho original.
Exemplo da propriedade flex-shrink:
exemplo da propriedade flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
}
.flex-container div {
width: 120px;
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-shrink: 0;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
<div>
<span>6</span>
</div>
</div>
</body>
</html>Recomendamos usar a propriedade abreviada flex em vez de flex-shrink para controlar a flexibilidade, pois ela redefine corretamente quaisquer componentes não especificados para acomodar casos de uso comuns.
A propriedade flex-basis
A propriedade flex-basis define o tamanho inicial de um flex item, antes que o espaço restante seja distribuído de acordo com os fatores flex. A propriedade é especificada pela palavra-chave content ou por um valor de largura.
Os valores de flex-basis são os seguintes:
- auto (padrão) — o comprimento é igual ao comprimento do item flexível.
- width — um comprimento absoluto, ou uma porcentagem do tamanho principal do flex container pai, ou a palavra-chave auto. Valores negativos são inválidos.
- content — determina o dimensionamento automático com base no conteúdo do flex item.
- initial — define esta propriedade ao seu valor padrão.
Nota: A propriedade content ainda não é bem suportada, por isso não é fácil entender o que suas variantes max-content, min-content e fit-content fazem.
Exemplo da propriedade flex-basis:
propriedade flex-basis, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
background-color: #8ebf42;
}
.flex-container div {
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
background-color: #fff;
}
.flex-container div.four {
flex-basis: 25%;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div class="four">
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>A propriedade flex
A propriedade flex é a abreviação para flex-grow, flex-shrink e flex-basis juntas. As propriedades flex-shrink e flex-basis são opcionais.
Entre outros valores, esta propriedade pode aceitar auto (1 1 auto) ou none (0 0 auto).
Recomendamos fortemente usar a propriedade abreviada flex em vez das propriedades individuais.
Exemplo da propriedade flex:
flex em vez de flex-shrink, exemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
height: 150px;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.second > div {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-container second">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Nota: As propriedades CSS float, clear e vertical-align não têm efeito sobre os flex items.
Exemplos de Flexbox
Vamos ver alguns exemplos de CSS Flexbox e observar que tipos de layouts você pode usar em seus próprios projetos web.
Centralizar Elementos Vertical e Horizontalmente
Centralizar elementos com todos os meios disponíveis em CSS sempre foi um problema. Com o advento do Flexbox, esse problema é facilmente resolvido. Com as propriedades align-items, align-self e justify-content, é possível alinhar elementos tanto verticalmente quanto horizontalmente.
Exemplo das propriedades align-items, align-self e justify-content para centralizar elementos vertical e horizontalmente:
Centralizar Elementos Vertical e Horizontalmente com Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px dashed #666;
}
.flex-container > div {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Barra de Navegação Responsiva com Pesquisa
Usando Flexbox, é possível criar uma barra de navegação com itens de menu alinhados à esquerda e a barra de pesquisa alinhada à direita (ou vice-versa). A barra de navegação é responsiva, expandindo ou recolhendo conforme o tamanho da tela.
Exemplo da barra de navegação responsiva:
Exemplo de navbar com Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-nav {
display: flex;
padding: 15px;
border-radius: 5px;
background: #1c87c9;
color: #fff;
font-weight: 500;
}
.main-nav > ul {
display: flex;
flex: 2;
padding: 0;
margin: 0;
list-style-type: none;
}
.main-nav li {
margin-right: 20px;
}
.main-nav > form {
display: flex;
justify-content: flex-end;
flex: 1;
}
.main-nav input {
flex: 1;
padding: 5px;
}
.main-nav button {
padding: 0 20px;
margin-left: 10px;
border: 0;
border-radius: 20px;
background: #fff;
color: #666;
}
@media screen and (max-width: 575px) {
.main-nav {
flex-direction: column;
}
.main-nav ul {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
</ul>
<form>
<input type="search" placeholder="Search" />
<button type="button">Go</button>
</form>
</nav>
</body>
</html>O Layout Holy Grail
O padrão de layout Holy Grail é muito popular na web. Ele inclui cabeçalho, rodapé, a área de conteúdo principal com navegação de largura fixa à esquerda, conteúdo no centro e uma barra lateral de largura fixa à direita.
Exemplo do layout holy grail:
Layout Holy Grail com Flexbox, exemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
display: flex;
flex: 1;
}
.main > article {
flex: 1;
}
.main > nav,
.main > aside {
flex: 0 0 20vw;
background: #d5dce8;
}
.main > nav {
order: -1;
}
header,
footer {
background: #1c87c9;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<div class="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>