Resumo Flexbox em CSS

CSS FLEXBOX

*** Resumo completo com imagens em: https://github.com/CatiusciScheffer/Resumos-de-Estudos.git

FLEX CONTAINER

É a tag que envolve os itens, será nela que iremos aplicar a propriedade “display: flex” para sua inicialização, transformando assim todos os seus itens filhos em flex itens.

Inicialização do container:

  .flex-container{
  display: flex; 
   }

Itens do container:

  .flex-item{
  background-color: blue;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 20px;
  color: white;
  text-align: center;
  margin: 5px;
  }/*… poderá ter diversas propriedades*/

FLEX DIRECTION

É a propriedade que estabelece o eixo principal do container, definindo assim a direção que os flex items são colocados no flex container.

Exemplo de código com flex direction:

.row{
flex-direction: row;
}

FLEX WRAP

Controla se quebra ou não linha, o padrão não tem quebra de linha o que pode ocasionar dos itens extrapolarem o container;

TIPOS DE FLEX-WRAP:

- NOWRAP: padrão não permite quebra de linha;

- WRAP: permite quebra de linha, quebra a linha e vai para a linha de baixo, escrita da esquerda para a direita;

- WRAP-REVERSE: quando encher a primeira linha, vai tudo para a segunda e começamos a preencher a primeira linha novamente;

Exemplo de código com flex-wrap:

.wrap-reverse{
flex-wrap: wrap-reverse;
}

FLEX FLOW

É um atalho que une o flex-direction e flex-wrap ame apenas uma linha de código.

Exemplo de código com flex flow:

.defaul{
flex-flow: row nowrap;
}

JUSTIFY CONTENT

Essa propriedade vai se encarregar de alinhar os itens dentro do contêiner de acordo com a direção (linhas ou colunas) pretendida e tratar da distribuição de espaçamento entre eles.

Conforme a direção escolhida o alinhamento será diferente, se for para linha o alinhamento será no sentido horizontal, se o alinhamento for por colunas o alinhamento será vertical.

Conforme o item aumenta de tamanho o crescimento se dá proporcionalmente para a direita e ao chegar na largura do contêiner para baixo.

Não são necessários os conceitos de altura porque aplica a altura pelo contêiner;

Não faz efeito quando os itens ocupam 100% do contêiner;

Quando utilizado juntamente com a propriedade flex: 1, a distribuição utilizará todo o contêiner e se ajustará ao item com maior conteúdo deixando todos os itens com mesma largura e ajustando a altura ao item com maior conteúdo.

TIPOS DE JUSTIFY CONTENT

- FLEX-START: início do contêiner;

- FLEX-END: final do contêiner;

- CENTER: ao centro do contêiner;

- SPACE-BETWEEN cria um espaçamento idêntico entre os elementos;

- SPACE-AROUND: os espaçamentos do meio são o dobro do inicial e do final;

Exemplo de código com justify-content:

.space-around{
justify-content: space-around;
}

ALIGN-ITEMS

Trabalha o alinhamento dos flex itens de acordo com o eixo do contêiner;

Conforme a direção escolhida o alinhamento será diferente, se for para linha o alinhamento será no sentido vertical, se o alinhamento for por colunas o alinhamento será horizontal.

Conforme o item aumenta de tamanho o crescimento se dá proporcionalmente para a direita e ao chegar na largura do contêiner para baixo.

Permite o alinhamento central no eixo vertical, alinhar elemento no centro da tela;

Não será necessário aplicar os itens de altura no item, mas sim no contêiner;

TIPOS DE ALIGN-ITEMS

- CENTER: centraliza os itens;

- STRETCH: padrão, e os flex itens crescem igualmente;

- FLEX-START: alinha no início;

- FLEX-END: alinha no fim;

- BASELINE: alinha de acordo com a linha base da tipografia dos itens;

Exemplo de código com align-items:

 .center{
align-items: center;
} 

ALIGN-CONTENT

É responsável por tratar o alinhamento das linhas do contêiner em relação ao eixo vertical do contêiner, ou seja vai tratar a orientação das linhas.

Contêiner vai precisar de quebra de linha com modo wrap, a altura do mesmo deverá ser maior do que a soma das alturas das linhas.

.container{
height: 400px;
max-width: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}

.item{
background-color: orangered;
padding: 1 5px;/*margem entre conteúdo e borda*/
margin: 5px;
flex: 1;
text-align:center;
color: white;
border: 1px solid black;
}

TIPOS DE ALIGN-CONTENT

- CENTER: alinhamento ao centro;

.center{
align-content: center;
}

- STRETCH: vai fazer a distribuição igualitária pelo maior elemento daquela linha;

.stretch{
align-content: stretch;
}

- FLEX-START: alinhamento no início;

.flex-start{
align-content: flex-start;
}

- FLEX-END: alinhamento no fim;

.flex-end{
align-content: flex-end;
}

- SPACE-BETWEEN: alinhamento com espaçamento idêntico entre os itens;

.space-between{
align-content: space-between;
}

- SPACE-AROUND: espaçamento entre os itens em dobro no meio em relação as extremidades;

.space-around{
align-content: space-around;
}

FLEX-ITENS

FLEX-GROW

Define a proporcionalidade de crescimento dos itens, respeitando o tamanho dos seus conteúdos internos.

O justify-content no container não irá utilizar quando utilizo o flex-grow;

Definido apenas por número;

.fg-0{
flex-grow: 0;
}

FLEX-BASIS

Estabelece o tamanho inicial do item antes das distribuições de espaço restante dentro dele, usando como base o conteúdo interno disposto.

- AUTO: caso o item não tenha tamanho, este será proporcional ao conteúdo do item.

.b-auto{
flex-basis: auto;
}
  /*VALOR PREDEFINIDO: %, px, em, …*/
.b-3{
flex-basis: 30px;
}

- ZERO: terá relação com a definição do flex-grow;

.b-0{
flex-basis: 0;
}

FLEX-SHRINK

É a propriedade que estabelece a capacidade de redução ou compressão do tamanho do item.

Se tiver zero não muda nada;

.s-1{
flex-shrink: 1;
}
OU
.s-0{
 flex-shrink: 2;
 flex-basis: 100px; /*definindo tamanho mínimo*/

FLEX

É a propriedade de atalho para grow, shrink e basis.

.flex-1{
flex: 1;
/*grow = 1, shrink = 1, basis = 0*/
}

.flex-2{
flex: 2;
/*grow = 2, shrink = 1, basis = 0*/
}

/*uso para alterar o valor do basis*/
.largura{
width: 200px;
min-width: none; /*só vai funcionar se trocar o none por algum valor*/
}

ORDER

Utilizadas pra ordenação dos itens, se colocar valores positivos a ordenação vai da esquerda para a direita e de cima para baixo, se colocar valor negativo faz o inverso.

.o3{
order:3
}

ALIGN-SELF

Possibilita o alinhamento individual por item.

Não poder ter definido align-item no container.

.container{
max-width: 350px;
border: 1px solid black;
margin-bottom: 10px;
display: flex;
}

.align-container{
align-items: center;
}

.item{
background-color: brown;
color: wheat;
font-size: 24px;
text-align: center;
margin: 5px;
}

TIPOS DE ALIGN-SELF

- AUTO: valor padrão, irá respeitar a definição de align-items do container;

- FLEX-START: ao início do container;

.start{
align-self: flex-start;
}

- FLEX-END: no fim do container;

.end{
align-self: flex-end;
}

- CENTER: relativo ao centro de acordo com o eixo, diferente para linhas e colunas;

.center{
align-self: center;
}

- STRETCH: ocupa todo espaço relativo;

.stretch{
align-self: stretch;
}

- BASELINE:utiliza a linha base da tipografia;

.baseline{
align-self: baseline;
}