CSS3 Flexbox Posicionando elementos parte 2

CSS3 Flexbox Posicionando elementos parte 2

14/07/2018 0 Por Alisson Suassuna

E aí pessoal, vamos a parte 2 do artigo CSS3 Flexbox Posicionando elementos, caso não tenha lido a parte 1 corre lá. A introdução com maiores explicações sobre o Flexbox está no artigo parte 1. Nesse vamos continua explicando cada propriedade e o que podemos fazer com elas, então vamos ao nosso código base.


Flexbox

código base

Bom, neste código temos uma <div> que contém mais quatro <div>, um <style> bem simples, com cores, borda e uma largura e altura, lembrando que esse código foi escrito para facilitar as explicações desse artigo, em breve vamos ter uma série sobre CSS3 onde explicarei com mais detalhes suas propriedades.

Selecionando um elemento específico


Flexbox

Representação – código order no browser

Estamos selecionando o elemento 3, dentro do meu container, e aqui vamos mudar a ordem dos elementos, pois eles possuem uma ordem dentro do flex-container, podemos fazer manipulações nessa ordem desse flex-item em um item especifico. Todos os itens dentro de um flex-container tem por padrão a ordem 0, e no momento que alteramos ele passa a ter um “peso” maior e passa a ser o último elemento, ou seja, os elementos que possuir uma ordem maior serão exibidos por último. O mesmo vale para o elemento com a ordem menor, eles passam a ser exibidos primeiro.

Propriedade align-self – Flexbox


Flexbox

Imagem do browser para os três atributos aplicados

  1. center (Centraliza o elemento)

  2. flex-end (Elemento será posicionado no fim)

  3. flex-start (Elemento será posicionado no início )

  4. stretch (posição padrão)

Veja que o Flexbox nós dá uma grande flexibilidade para montar nossos layout, e com poucas linhas posiciono meus elementos.

Propriedade Flex Grow – Flexbox

Acredito que vocês já tenham notado que temos no nosso layout um espaço vazio, e o Flexbox tem uma propriedade para esse “problema” vamos entender mais a fundo essa propriedade e entender como ela trabalha.

Flexbox

Explicação da propriedade Flex-Grow

Essa imagem representa nosso flex-container com suas quatro <div> o tamanho total do mesmo é de 600px e aplicamos 100px para cada uma das quatro <div>, dessa forma está sobrando 200px certo? Quando usamos o flex-grow damos um peso a ele, por exemplo: peso 1, peso 2 etc. Vamos supor que queremos atribuir peso 1, então a primeira <div> terá peso 1, segunda peso 1, terceira peso 1 e quarta peso 1, como todas as <div> terão o mesmo peso ele irá somá-lo, o valor será 4, agora o flex-grow irá pegar os 200px que está sobrando, dividir por 4, o valor desse cálculo será de 50px, o qual será dividido igualmente entre os elementos. Recapitulando (1 + 1 + 1 + 1) / 200px = 50px.

Vamos a outro exemplo, se caso colocar flex-grow 2 em uma das quatro <div>, teremos o seguinte cálculo; (1 + 2 + 1 + 1) / 200px = 40px. Nesse caso as <divs> que tem peso 1 será aplicado 40px e na segunda <div> que tem peso 2, será feito 40px * 2 no caso ele aplicará 80px no elemento 2.


Flexbox

Com Flex-grow 1

 

Vamos agora aplicar o flex-grow a um elemento específico


para um elemento especifico

Propriedade flex-shrink

O flex shrink usa a mesma lógica do flex grow, porem é para a diminuição do elemento.

Aplica flex-shrink

Avisos

Galera vamos ter parte 3, breve estarei publicando, caso goste deixa sei liker e compartilhe para seus colegas que estejam estudando CSS3, caso tenha algo a acrescenta, ou algum dica, elogio sugestão deixa um comentário assim você me ajuda a melhora cada vez mais.

Recomendações da semana

Curso

 O que aprenderei?

  1. Construir uma página web
  2. Pensar como um frontend, ver um layout e conseguir transformar em código

  3. Saber a base de HTML e CSS

Livro

Um dos melhores livros que li sobre HTML e CSS.