Introdução ao modelo flexível de caixas
Caixas, caixas...
Para entender Flexbox, precisamos compreender que alguns elementos podem ser vistos como caixas, ou containers, e outros como itens desses containers.
Para começar a usar essas propriedades, adicionamos ao elemento container a propriedade display e atribuimos a ela o valor flex.
.container {
display: flex;
}
Linhas e colunas
Com o flexbox é fácil criar linhas ou colunas, usamos a propriedade flex-direction. Como valor podemos usar row, row-reverse, column, e column-reverse.
Vamos praticar?
Distribuição de espaço
Podemos definir também a distribuição de espaços entre um elemento e outro. Para isso usamos a propriedade justify-content. Essa propriedade aceita os valores flex-start, flex-end, center, space-between, space-around.
Vamos praticar?
Espalhando elementos em linha
Nossos elementos podem ocupar uma única linha em um container. Outras vezes podemos achar melhor que os elementos possam ser espalhados em linhas adicionais. Definimos esse comportamento usando a propriedade flex-wrap.
Vamos praticar?
Alinhando itens
Podemos definir o alinhamento dos elementos em relação à altura do container. Usamos a propriedade align-items, que pode receber os valores flex-start, flex-end, center, baseline, e stretch.
Alinhando multiplas linhas
Em containers com múltiplas linhas podemos usar o align-content. Enquanto align-items determina como as linhas são alinhadas dentro do container como um todo, align-content determina como múltiplas linhas devem ser espaçadas uma das outras.
Vamos praticar?
A ordem dos itens
Se quisermos mudar a ordem do item podemos adicionar a propriedade order no item.
Vamos praticar?
Alinhando um item
Quando necessário, se preciamos alterar o alinhamento de um item, podemos usar a propriedade align-self então ele pode mudar o comportamento de alinhamento dele mesmo.
Vamos praticar?
Até a próxima!
Não deixem de revisar as apostilas e resumos
Introdução ao modelo flexível de caixas
By Dali Vieira
Introdução ao modelo flexível de caixas
- 1,008