O Flexbox provê ferramentas para criação rápida de layouts complexos e flexíveis. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela, além de possuir capacidades avançadas de alinhamento.
Para que serve o flexbox?
Ele visa organizar os elementos de uma página HTML dentro de seus containers de forma dinâmica. Ou seja, independente das suas dimensões eles sempre manterão um layout flexível dentro do seu elemento pai, reorganizando-se de acordo com a necessidade.
Como utilizar o flexbox?
O primeiro passo para começar a usar Flexbox é criar um flex container. Elementos-filhos de um flex container são chamados flex items e são leiautados dentro do flex container usando as propriedades Flexbox. Algumas das propriedades Flexbox são aplicadas ao container; outras, aos items.
Quando usamos display: flex em um elemento, o navegador passa a considerar esse elemento como um flex-container, ou seja, os filhos ficam um do lado do outro e podemos aplicar propriedades espaça-los.
Como algumas propriedades funcionam:
Justify-Content
justify-content: space-between; Faz com que os espaços que sobraram no elemento pai sejam distribuídos entre os filhos
justify-content:space-around; Coloca o espaço em volta dos elementos
Justify-content: flex-end; Coloca todo espaço à esquerda, jogando o conteúdo para a direita
justify-content: flex-start; Colocar todo espaço à direita, jogando o conteúdo para esquerda (padrão)
justify-content: center; Coloca todo espaço à esquerda e à direita, jogando o conteúdo para o meio.
Flex
flex-wrap: wrap; Não transborda o conteúdo, de forma que quando o conteúdo ultrapassar o tamanho do pai, ele simplesmente quebre para uma próxima coluna.
flex-grow: 1; Cresce no tamanho que sobrou na página.
flex-shrink: 2; Conforme vá diminuindo a tela, o conteúdo diminui duas vezes. (se usar zero, ele se mantem do mesmo tamanho)
flex-direction: column; Colocar um elemento em baixo do outro.
flex-direction: row; Colocar os elementos em linha.
order: -1; Muda ordem dos elementos com flex
link documentação flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Comentários
Postar um comentário