Resumo Flexbox em CSS
- #HTML
- #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;
}