A "magia" do Flexbox para alinhar elementos HTML; Exemplo sem e com Flexbox
Meu cunhado começou a estudar HTML e CSS. Um dia destes, durante sua rotina de estudos, ele esbarrou no Flexbox e me perguntou o que era.
Expliquei o que eu sabia: é um conjunto de propriedades que facilita a criação de páginas HTML flexíveis e responsivas.
Como achei a explicação vaga, resolvi mostrar um exemplo prático. A ideia proposta era criar um cabeçalho de um site com três elementos: um espaço à esquerda para o botão de menu; a logo do site ao centro; e à direita um botão para fazer login.
Comecei mostrando como faríamos isso sem Flexbox e posteriormente alterei o código para utilizar Flexbox. O objetivo era mostrar a diferença das duas abordagens. Por isso, não me preocupei em utilizar os elementos <img> e <button>. Apenas criei os "espaços" utilizando <div> para transmitir a ideia.
Sem Flexbox
Código
<html>
<head>
<style>
header {
width: 100%;
height: 50px;
background: #323232;
color: #fff;
}
.menu {
width: 20%;
float: left;
}
.logo {
width: 60%;
float: left;
text-align: center;
}
.login {
width: 20%;
float: right;
text-align: right;
}
</style>
</head>
<body>
<header>
<div class="menu">
Menu
</div>
<div class="logo">
globo.com
</div>
<div class="login">
Entrar
</div>
</header>
</body>
</html>
Resultado
Repare que para criar a página proposta sem Flexbox, foi necessário estilizar cada um dos elementos dentro da tag <header>. Precisamos definir os tamanhos, se seriam alinhados à direita ou à esquerda e ainda precisamos definir o elemento da logo como text-align: center.
Com Flexbox
Código
<html>
<head>
<style>
header {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
background: #323232;
color: #fff;
}
</style>
</head>
<body>
<header>
<div>
Menu
</div>
<div>
globo.com
</div>
<div>
Entrar
</div>
</header>
</body>
</html>
Resultado
Com Flexbox foi possível produzir o mesmo resultado (na verdade, melhor) escrevendo menos código.
Ao adicionar a propriedade display: flex ao elemento <header>, todos os elementos filhos passaram a ser flex items. Com isso, a largura padrão da <div> será o tamanho do seu conteúdo.
Com a propriedade justify-content: space-between conseguimos fazer com que o elemento do "Menu" fosse alinhado à esquerda, a logo ao centro e o "Entrar" à direita. Uma vez que esta propriedade distribui os elementos com espaçamento igualitário entre eles, colocando o primeiro elemento no ínicio e o último ao final.
Simples assim, não precisamos definir o tamanho dos elementos e nem nos preocupar em utilizar float ou text-align para alinhar os elementos e o texto deles.
A propriedade align-items: center foi utilizada como um "bônus" para alinhar verticalmente os elementos "filhos" ao centro, respeitando a altura de <header>.
Você pode ler mais sobre Flexbox no site da Mozilla. Também gosto deste guia da Origamid.