O que é FlexBox
O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).
Como a própria Wikipedia diz, facilita nossa vida na hora de criar layouts, e como facilita... Criar layouts complexos com linhas e colunas parece brincadeira de criança com FlexBox.
Como funciona o Flexbox
Seu uso e conceito são bem simples, normalmente aplicamos o Flexbox em elementos que possuem filhos para ajustá-los da forma que queremos. Como assim?
<div class="container">
<h1>Eu sou o filho 1</h1>
<h2>Eu sou o filho 2</h2>
</div>
Podemos dizer que a nossa div com a classe container é a candidata perfeita para ser display: flex
Propriedades do Flexbox
A partir do momento que definimos um elemento com display: flex
, podemos usar as propriedades align-items
, justify-content
e flex-direction
, além de outras.
flex-direction
Por padrão a propriedade flex-direction vem com o valor padrão de row, isso significa que o posicionamento será sempre na horizontal. Podemos modifica-lo para flex-direction: column que muda o comportamento para colunas, ou seja, na vertical. Isso influencia diretamente nas outras propriedades do Flexbox, caso o flex-direction seja column, align-items e o justify-content vão inverter as direções.
align-items
A propriedade align-items possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores: center
, flex-start
e flex-end
.
center como o próprio nome diz, posiciona os elementos horizontalmente/verticalmente ao centro.
flex-start posiciona os elementos horizontalmente/verticalmente ao inicio.
flex-end posiciona os elementos horizontalmente/verticalmente no final.
justify-content
A propriedade justify-content possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores os mesmo do align-items com a adição de space-between
e space-around
.
space-between posiciona todos os elementos horizontalmente/verticalmente com o máximo de espaço entre eles
space-around posiciona os elementos horizontalmente/verticalmente com o máximo de espaço ao redor deles.
Agora um exemplo com Flexbox
Vamos construir a barra de navegação do próprio Dev.to. Com apenas 3 linhas de CSS conseguimos ter o posicionamento idêntico, mostrando o poder do Flex box.
HTML
<nav>
<div>
logo
<input type="search">
</div>
<div>
<button>Write a post</button>
<span>Icone 1</span>
<span>Icone 2</span>
<span>Imagem</span>
</div>
</nav>
CSS
nav {
display: flex;
align-items: center;
justify-content: space-around;
}
Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.
Top comments (0)