DEV Community

loading...
Cover image for Flexbox

Flexbox

w1redl4in profile image Felipe Austriaco Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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.

align-items

A propriedade align-items possui a função de alinhar os filhos na vertical e tem como principais valores: center, flex-start e flex-end.

center como o próprio nome diz, posiciona os elementos verticalmente ao centro.

flex-start posiciona os elementos verticalmente ao inicio, ou seja, ao topo.

flex-end posiciona os elementos verticalmente ao final.

justify-content

A propriedade justify-content possui a função de alinhar os filhos na horizontal 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 com o máximo de espaço entre eles

space-around posiciona os elementos horizontalmente 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>
Enter fullscreen mode Exit fullscreen mode

CSS

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.

Resultado
Alt Text

WORK IN PROGRESS

Discussion (0)

pic
Editor guide