- Habilita um container a alterar a largura e comprimento dos itens dentro dele
- Direção Principal = Main
- Direção Secundária = Cross
- Depende da propriedade flex-direction
- display: flex;
- flex-direction: Direção e sentido principais
- row / row-reverse
- column / column-reverse
- flex-wrap: Todos os items devem ficar na mesma linha, ou devem ir pra próxima em caso de falta de espaço?
- nowrap: mesma linha
- wrap: vão pra prox linha
- wrap-reverse: vão pra prox linha, começando da parte de baixo
- justify-content: DEFINE O POSICIONAMENTO NO MAIN AXIS
- flex-start: containers começam do início
- flex-end: containers começam no fim
- center: centralizado
- space-between: maior espaçamento, com o primeiro item no inicio e o último no fim
- space-around: Um pouco de espaço em relação a borda, parecido com space-between
- space-evenly: distribuição usando margens na esquerda e direita idênticas
- align-items: DEFINE ESPAÇAMENTO NO CROSS AXIS
- flex-start: Inicio
- flex-end: Fim
- center: centralizado
- stretch: Estica para cobrir o container inteiro
- baseline: usa a "baseline" textual
- align-content: DEFINE ESPAÇAMENTO NO CROSS AXIS ENTRE OS ITENS
- Funciona se tiver mais de uma linha de itens flex
- flex-start: itens o mais próximo possível do início
- flex-end: itens o mais próximo possível do fim
- center: items o mais centralizado possível
- space-between: espaçamento entre os itens
- Etc... (mesmos do jstify-content)
- flex-order: Define uma ordem de posicionamento
- menores números sempre vem antes, independente da posição do CSS
- flex-grow: Valor unitário que determina a porcentagem que um item deve crescer em relação aos outros
- flex-shrink: Valor unitário que determina a porcentagem que um item deve diminuir em relação aos outros
- flex-basis: Tamanho inicial do item, antes da expansão / deflação tomar efeito
- align-self: Substitui o alinhamento definido no container
- usaos mesmos atributos
- Note: As propriedades float, clear, vertical-align não tem efeito em itens flex
- Sistema com duas dimensões
- Funciona em todos os browsers
- Menos IE11 (Porém funciona com algumas soluções)
- Terminologia
- Grid Container: Container que dá propriedades de Grid para todos os seus filhos
- Grid Item: Itens capazes de utilizar propriedades Grid
- Grid Line: Linha da "matriz" que compõe o Grid
- Grid Cell: Um quadrado ou célula, dentro da matriz
- Grid Track:
- Para iniciar uma grid usamos display: grid | inline-grid
- Para definir a disposição da grid usamos:
- grid-template-columns: 50px 50px auto; Colunas da Grid
- grid-template-rows: 30% 40% 50px auto; Linhas da Grid
- Pode se nomear explicitamente cada uma das linhas e colunas:
- grid-template-rows: [primeira-linha] 30% [seg-linha] 350px [terc-linha] auto [linha-final];
- fr -> Espaço Livre, podemos usar para definir o tamanho das linhas como uma fração do espaço livre
- grid-template-columns: 1fr 100px 100px 1fr -> Primeira e ultima coluna com metade do espaço livre cada
- Para definir a área de uma Grid temos:
.item-a {
grid-area: navbar;
}
.item-b {
grid-area: footer;
}
.container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 30% 20% 50%;
grid-template-areas:
"navbar navbar navbar"
". .. ... ...." // Ignorado pela Grid Area
"footer footer footer";
}- column-gap: Espaço entre as Colunas
- row-gap: Espaço entre as Linhas
- Pode se usar tbm o gap
- gap:
- Serve para relacionar os ELEMENTOS com a GRID AREA
- justify-items: start | end | stretch | center
- Justifica os itens dentro de cada linha, usando umas das quatro propriedades acima
- align-items: start | end | strecth | center
- Alinha os itens dentro de cada coluna, usa as mesmas quatro propriedades
- place-items: align / justify
- Serve para relacionar as GRID AREAS com a GRID
- justify-content: start | end | center | stretch | space-around | space-between | space-evenly
- Justifica as Grid Áreas em relação a Grid, de maneira horizontal usa as mesmas propriedades que o flexbox
- align-content: start | end | center | stretch | space-around | space-between | space-evenly
- Alinha as Grid Áreas em relação a Grid, de maneira vertical. Usa as mesmas props. que o flexbox
- place-content: align / justify
- Determina as duas propriedades anteriores em uma só declaração
- Observação:
- float, display: inline-bloc, display: table-cell, vertical-align e column-* não tem efeito em um Grid Item
- grid-column-start & grid-column-end
- grid-row-start & grid-row-end
- Recebe a posição inicial e final do item dentro da Grid
- Para definir essas posições podemos usar
- Número da coluna / linha(span opcional)
- Nome da coluna / linha (span opcional)
- span <-numero-> indica que é pra passar por <-numero-> áreas, sendo elas colunas ou linhas
- Podemos usar os shorthands
- grid-column: start / end
- grid-row: start / end
- Duas utilidades
- Shorthand das quatro funções mencionadas acima:
- grid-area: row-start / column-start / row-end / column-end
- Usado em conjunto com o grid-template-areas
- grid-area: <-nome-area->
- Shorthand das quatro funções mencionadas acima:
- Podemos sobrescrever as definições do Grid Container usando
- justify-self: start | end | center | stretch
- align-self: start | end | center | stretch
- place-self: align / justify