
Bom dia amigos!
Aqui está um guia de folha de dicas visual completo para todas as propriedades dos módulos Flexbox e Grid CSS.
Fontes principais: A Complete Guide to Flexbox , A Complete Guide to Grid .
No final do artigo, você encontrará um pequeno tutorial sobre como criar um simulador Flexbox.
Sem mais preâmbulos.
Flexbox (Flex, doravante denominado Flex)
Terminologia
Flex não é uma propriedade separada, mas um módulo inteiro que inclui um conjunto de propriedades. Algumas dessas propriedades são adicionadas ao contêiner (o elemento pai, conhecido como flex container), outras são adicionadas aos elementos filhos (conhecidos como flex items, a seguir - elementos)).
O layout “regular” é baseado no fluxo de blocos e elementos inline, enquanto o layout flexível é baseado em direções de fluxo flexível. Dê uma olhada nesta imagem da especificação para mostrar as principais ideias por trás do layout flexível.

Os elementos são posicionados ao longo do eixo principal (do início ao fim principal) ou ao longo do eixo cruzado (do início ao fim).
- — , , . ; «flex-direction» (, . )
- main-start | main-end — main-start main-end
- (main size) — (main dimension),
- — , .
- cross-start | cross-end — , cross-end cross-start
- (cross size) —

-
display
Esta propriedade define um flex container; bloco ou linha dependendo do valor atribuído. Inclui o "contexto flexível" para todos os filhos diretos do contêiner.
.container {
display: flex; /* inline-flex */
}
Observe que as propriedades da coluna CSS no contêiner não funcionam.
direção flexível

Esta propriedade define o eixo principal, a direção ao longo da qual os itens são colocados no contêiner. O próprio Flex (sem os invólucros estendendo sua funcionalidade) implementa o conceito de um layout unidirecional. Portanto, os elementos são colocados em linhas horizontais ou em colunas verticais.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- linha (padrão): os itens são dispostos da esquerda para a direita em ltr ou da direita para a esquerda em rtl
- row-reverse: inverter a ordem das linhas dos itens - da direita para a esquerda em ltr ou da esquerda para a direita em rtl
- coluna: semelhante à linha, mas de cima para baixo
- coluna reversa: semelhante a linha reversa, mas de baixo para cima
flex-wrap (embrulhar, transição, divisão)

Por padrão, todos os itens são colocados em uma linha. Com essa propriedade, você pode permitir que os itens sejam movidos para a próxima linha conforme necessário.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (padrão): todos os itens estão em uma linha
- wrap: os elementos podem abranger várias linhas de cima para baixo
- wrap-reverse: os elementos podem se estender por várias linhas de baixo para cima
flex-flow (fluxo)
Esta propriedade é uma abreviação de flex-direction e flex-wrap, que definem os eixos principal e transversal do contêiner. O padrão é linha nowrap.
.container {
flex-flow: column wrap;
}
justify-content (alinhar o conteúdo em uma linha)

Esta propriedade determina o alinhamento dos elementos ao longo do eixo principal. Permite distribuir o espaço livre deixado por elementos não utilizados com tamanho fixo ou elementos flexíveis que atingiram seu tamanho máximo. Ele também permite que você controle o alinhamento de itens que transbordam.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
- flex-start (padrão): os itens são movidos para o início do contêiner ao longo do eixo principal
- flex-end: os itens são empurrados para o final do contêiner
- start: os elementos são movidos para o início do container, determinado pelo valor da propriedade "writing-mode"
- fim: os elementos são deslocados para o final do contêiner, determinado pelo valor da propriedade "modo de escrita"
- esquerda: os itens são empurrados para a borda esquerda do contêiner; sem flex-direction, o comportamento é semelhante ao start
- direita: os itens são espremidos para a borda direita do contêiner; sem flex-direction, o comportamento é semelhante ao start
- center:
- space-between: , , — ,
- space-around: . , ; , . , ,
- space-evenly: ,
Observe que o suporte para as propriedades listadas varia de acordo com o navegador. Os mais seguros são flex-start, flex-end e center.
Quanto às palavras-chave adicionais "seguro" e "inseguro", o uso de seguro permite evitar a renderização de elementos fora da página, independentemente do posicionamento, o que, por sua vez, elimina a possibilidade de rolagem.
alinhar itens (alinhar itens)

Esta propriedade determina como os elementos são posicionados ao longo do eixo transversal. Pode ser comparado a justificar-conteúdo para o eixo transversal (perpendicular ao eixo principal).
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
- stretch (padrão): os elementos se estendem para preencher todo o contêiner (depende de sua largura mínima / largura máxima)
- flex-start / start / self-start: os itens são deslocados para o início do eixo transversal. As diferenças entre as propriedades acima não são significativas e dependem da direção flexível ou do modo de escrita
- flex-end / end / self-end: Os itens são deslocados para o final do eixo transversal. As diferenças entre as propriedades acima não são significativas e dependem da direção flexível ou do modo de escrita
- centro: os elementos estão centrados
- linha de base: os elementos são alinhados ao longo de sua linha de base
As palavras-chave modificadoras "seguro" e "inseguro" podem ser usadas como configurações adicionais para evitar o alinhamento de elementos que tornariam o conteúdo inacessível (inacessível, fora da página).
alinhar o conteúdo (alinhar o conteúdo em várias linhas)

Esta propriedade determina o alinhamento das linhas do contêiner quando há espaço livre ao longo do eixo transversal. É semelhante a justify-content, que distribui o espaço entre os elementos individuais ao longo do eixo principal.
Observe que a propriedade em questão se aplica apenas ao conteúdo do contêiner que abrange várias linhas quando a propriedade flex-wrap é definida como wrap ou wrap-reverse. Para um one-liner (quando a propriedade flex-wrap está definida como sem quebra), a aplicação de align-content não terá efeito.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
- normal (padrão): as linhas estão em posições normais
- flex-start / start: as linhas são movidas para o início do container. flex-start depende do flex-direction e start depende do modo de escrita
- flex-end / end: as linhas são empurradas para o final do contêiner. flex-end depende da flex-direction e end depende do modo de escrita
- centro: as linhas estão centradas
- espaço entre: as linhas são espaçadas de modo que a primeira linha esteja no início do contêiner, a última no final e as linhas restantes sejam espaçadas uniformemente
- espaço ao redor: as linhas são espaçadas com espaço igual entre elas
- espaço-uniformemente: as linhas são espaçadas com espaço igual ao redor de cada uma delas
- trecho: as linhas se estendem para preencher todo o espaço disponível
As palavras-chave modificadoras "seguro" e "inseguro" podem ser usadas como configurações adicionais para evitar o alinhamento de elementos que tornariam o conteúdo inacessível (inacessível, fora da página).

Propriedades do elemento Flex
pedido (pedido)

Por padrão, os elementos são organizados no contêiner na ordem em que são listados na marcação. Esta propriedade permite que você controle isso.
.item {
order: 5; /* 0 */
}
flex-grow (crescimento, expansão)

Esta propriedade determina a capacidade de um elemento se expandir quando necessário. É necessário um valor inteiro que atua como uma proporção. A proporção determina quanto do espaço disponível no contêiner um item pode ocupar.
Se todos os itens tiverem um crescimento flexível de 1, o espaço disponível será distribuído igualmente entre eles. Se um dos itens tiver um crescimento flexível de 2, esse item ocupará o dobro do espaço em comparação com o resto dos itens (ou pelo menos tente fazer isso).
.item {
flex-grow: 4; /* 0 */
}
Valores negativos não são válidos.
flex-encolher (encolher, encolher)
Esta propriedade determina a capacidade de um elemento ser compactado quando necessário.
.item {
flex-shrink: 3; /* 1 */
}
Valores negativos não são válidos.
base flexível
Esta propriedade define o tamanho padrão do elemento antes de alocar o espaço restante. Esse tamanho pode ser um comprimento (por exemplo, 20%, 5 rem, etc.) ou uma palavra-chave. A palavra-chave auto significa usar o valor da propriedade "width" ou "height" do elemento (anteriormente, main-size era usado em vez de auto). A palavra-chave "conteúdo" significa contabilizar o conteúdo do elemento. A palavra-chave mencionada ainda não é bem suportada, por isso é difícil dizer a diferença entre min-content, max-content e fit-content.
.item {
flex-basis: | auto; /* auto */
}
Se o valor desta propriedade for 0, o espaço ao redor do elemento não é levado em consideração. Se o valor for "auto", o espaço disponível é alocado de acordo com o valor da propriedade "flex-grow".
flex
Esta propriedade é uma abreviação de flex-grow, flex-shrink e flex-basis. O segundo e terceiro parâmetros (flex-shrink e flex-basis) são opcionais. O padrão é 0 1 automático e automático pode ser omitido.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Recomenda-se que você use esta abreviação em vez de definir cada propriedade para que os valores das propriedades sejam determinados automaticamente na ordem correta.
alinhar-se (alinhamento de elemento único)

Esta propriedade permite sobrescrever o padrão ou alinhamento próprio de um elemento individual.
Veja a explicação dos itens de alinhamento para os valores disponíveis.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Observe que float, clear e vertical-align não têm efeito em um elemento flexível.
Exemplos de
Vamos começar com um exemplo muito simples - resolvendo o problema de centralizar um elemento.
.parent {
display: flex;
height: 300px; /* */
}
.child {
width: 100px; /* */
height: 100px; /* */
margin: auto; /* ! */
}
Isso funciona graças ao fato de que a propriedade "margin" definida como "auto" consome todo o espaço disponível do flex container. Portanto, definir o valor das margens verticais como automático resulta na centralização perfeita do elemento em ambos os eixos.
Agora vamos tentar usar mais propriedades. Temos 6 elementos de tamanho fixo que podem ser redimensionados dependendo da largura da tela, sem envolver consultas de mídia. Queremos que o espaço disponível do eixo principal seja distribuído uniformemente entre os elementos.
.flex-container {
/* - */
display: flex;
/* ,
* :
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* , , */
justify-content: space-around;
}
Feito. Resta estilizar um pouco:
Vamos tentar outra coisa. Suponha que temos um menu de navegação alinhado à direita no cabeçalho de nosso site e queremos que ele seja centralizado em telas médias e alinhado em uma coluna em telas pequenas. Mole-mole.
/* */
.navigation {
display: flex;
flex-flow: row wrap;
/* */
justify-content: flex-end;
}
/* */
@media (max-width: 800px) {
.navigation {
/* */
justify-content: space-around;
}
}
/* */
@media (max-width: 500px) {
.navigation {
/* () () */
flex-direction: column;
}
}
Vamos experimentar a flexibilidade dos elementos. Que tal criar um layout de três colunas com dispositivo móvel com cabeçalho e rodapé em tamanho real que não depende da ordem dos elementos na marcação.
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* flex-basis 100% */
.wrapper > * {
flex: 1 100%;
}
/*
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* */
@media all and (min-width: 600px) {
/* */
.aside { flex: 1 auto; }
}
/* */
@media all and (min-width: 800px) {
/* main
* main 2 ,
*/
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Recursos Úteis
Apoio, suporte

Grade (doravante referida como Grade ou Grade)
CSS Grid Layout é de longe a ferramenta de layout de página mais poderosa. É um sistema bidirecional. Isso significa que ele pode trabalhar com linhas e colunas, ao contrário do Flex, que só pode trabalhar com linhas. Grid inclui as propriedades do elemento pai (Grid Container, doravante referido como o container) e propriedades dos elementos filhos (Grid Elements, grade elements, doravante referidos como os elementos).
Terminologia
Recipiente de grade (doravante denominado como um recipiente)
Um elemento que é atribuído a uma propriedade "display" com um valor de "grid" torna-se um contêiner de grade. Este contêiner é o ancestral direto de todos os itens da grade. No exemplo a seguir, um div com a classe "container" é um container de grade.
<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>
Linha de grade (doravante referida como linha)
A linha divisória que forma a estrutura da Grade. Pode ser vertical ou horizontal e denota a borda de uma linha ou coluna. A linha amarela na imagem abaixo é um exemplo de linha de grade vertical (linha de grade de coluna).

Trilha da grade (doravante referida como trilha ou trilha)
O espaço entre duas linhas adjacentes. Você pode pensar nas trilhas como linhas ou colunas da Grade. Aqui está um exemplo de uma trilha entre a segunda e a terceira linhas.

Área da rede (doravante referida como a área)
O espaço total entre as quatro linhas. Uma área pode abranger qualquer número de células da grade. Aqui está um exemplo da área entre as linhas horizontais 1 e 3 e as linhas verticais 1 e 3.

Elemento de grade (doravante referido como o elemento)
Filho (descendente direto) do container. No exemplo a seguir, os itens com a classe "item" são itens de grade, mas os itens com a classe "subitem" não são.
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>
Célula de grade (doravante referida como uma célula)
O espaço entre duas linhas horizontais e verticais adjacentes. É a unidade básica da Rede. Aqui está um exemplo de uma célula entre as linhas horizontais 1 e 2 e as linhas verticais 2 e 3.

Exemplo
Colunas de largura flexível que são redimensionadas automaticamente com base na largura da tela, sem consultas de mídia.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* min() */
/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
grid-gap: 1rem;
/* , */
/* gap: 1rem */
}
Propriedades do contêiner de grade
exibição
Esta propriedade torna o elemento um contêiner de grade e define o contexto da grade para seu conteúdo.
.container {
display: grid | inline-grid;
}
- grade - bloco de grade
- Inline-grid - Inline Grid
Observe que a capacidade de criar grades aninhadas foi movida para a especificação CSS Grid Nível 2 .
grade-modelo-colunas, grade-modelo-linhas
Essas propriedades definem as colunas e linhas dos valores de grade separados por espaço. Os valores representam o tamanho da pista e os espaços representam a linha.
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
- <track-size> - comprimento, porcentagem ou frações do espaço livre da grade (usando a unidade "fr")
- <line-name> - nome arbitrário
Quando você deixa um espaço em branco entre os valores da trilha, as linhas são atribuídas automaticamente a números positivos e negativos:
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}

Você pode especificar explicitamente os nomes das linhas. Observe os colchetes:
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

As linhas podem ter vários nomes. Aqui, por exemplo, a segunda linha tem dois nomes:
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
Se a definição contiver fragmentos repetidos, você pode usar a instrução "repeat" para encurtar:
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
O que é equivalente ao seguinte:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
Se várias linhas tiverem o mesmo nome, você pode usar o nome da linha e o número dessas linhas.
.item {
grid-column-start: col-start 2;
}
A unidade "fr" permite definir o tamanho da trilha como uma fração do espaço livre do contêiner. No exemplo abaixo, cada elemento tem um terço da largura do contêiner:
.container {
grid-template-columns: 1fr 1fr 1fr;
}
O espaço livre é calculado após a subtração de elementos de tamanho fixo. No exemplo a seguir, o espaço disponível para alocação usando a unidade "fr" não inclui 50px:
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
Esta propriedade define o template Grid usando os nomes das áreas definidas nas propriedades "grid-area". A repetição de nomes de área faz com que o conteúdo se expanda pelo número especificado de células. Um ponto significa uma célula vazia. Esta sintaxe permite que você visualize a estrutura do Grid.
.container {
grid-template-areas:
" | . | none | ..."
"...";
}
- <grid-area-name> - nome da área
- ... - célula vazia
- nenhum - nenhuma área
Exemplo:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
Este código cria uma grade com quatro colunas de largura e três linhas de altura. A primeira linha (superior) é totalmente ocupada pelo cabeçalho. A linha do meio consiste em duas áreas "principais", uma célula vazia e uma área de "barra lateral". A última linha é o porão.

Cada linha na definição deve ter o mesmo número de colunas.
Qualquer número de pontos pode ser usado para representar uma célula vazia. Desde que não haja espaço entre os pontos, eles são um indicador de uma célula vazia.
Observe que esta sintaxe é usada para representar áreas, não linhas. Usando essa sintaxe, a linha em cada lado da região é nomeada automaticamente. Se o nome da região for "foo", então as primeiras (primeiras) linhas (linha e coluna) da região serão "foo-start", e a última - "foo-end". Isso significa que algumas linhas podem ter vários nomes, como no exemplo acima, onde a linha superior esquerda tem três nomes: header-start, main-start e footer-start.
modelo de grade
Esta propriedade é uma abreviação para linhas de modelos de grades, colunas de modelos de grades e áreas de modelos de grades.
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
- nenhum - redefine os valores de todas as três propriedades para o padrão
- <grid-template-rows> / <grid-template-columns> - define as propriedades "grid-template-rows" e "grid-template-columns" para os valores correspondentes, e a propriedade "grid-template-areas" para "none"
Você pode usar uma sintaxe mais complexa, mas ao mesmo tempo mais conveniente, para definir os valores de todas as três propriedades:
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
Isso é equivalente ao seguinte:
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
Como o modelo de grade não redefine as propriedades de grade implícitas (como colunas automáticas de grade, linhas automáticas de grade e fluxo automático de grade), o que é necessário na maioria dos casos, é recomendável usar a propriedade "grade".
gap da coluna, gap da linha, gap da coluna da grade, gap da linha da grade
Essas propriedades determinam o tamanho das linhas. Em outras palavras, eles determinam a quantidade de recuo entre colunas / linhas.
.container {
/* */
column-gap: <line-size>;
row-gap: <line-size>;
/* */
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}
- <line-size> - quantidade de indentações
Exemplo:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}

O preenchimento é criado apenas entre colunas / linhas, não ao longo das bordas da grade.
Observe que as propriedades "grid-column-gap" e "grid-row-gap" agora foram renomeadas para "column-gap" e "row-gap".
gap, grid-gap
Esta propriedade é uma abreviação de gap de linha e gap de coluna.
.container {
/* */
gap: <grid-row-gap> <grid-column-gap>;
/* */
grid-gap: <grid-row-gap> <grid-column-gap>;
}
- <grid-row-gap> <grid-column-gap> - tamanhos de preenchimento
Exemplo:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
gap: 15px 10px;
}
Se o valor da propriedade "row-gap" não for definido, ele é definido como o valor da propriedade "column-gap".
Observe que a propriedade "grid-gap" agora foi renomeada para "gap".
justificar-itens
Esta propriedade determina o alinhamento dos itens nas células ao longo do eixo da linha (horizontal) (ao contrário da propriedade "align-items", que determina o alinhamento ao longo do eixo do bloco (coluna, vertical)). O valor desta propriedade se aplica a todos os elementos do contêiner.
.container {
justify-items: start | end | center | stretch;
}
- início - os elementos são deslocados para o início de suas células (borda esquerda)
- final - os elementos são deslocados para o final das células (borda direita)
- centro - os itens são centrados
- esticar - os elementos preenchem toda a largura das células
.container {
justify-items: start;
}

.container {
justify-items: end;
}

.container {
justify-items: center;
}

.container {
justify-items: stretch;
}

A posição de um item individual ao longo do eixo da linha da célula é controlada pela propriedade "justificar-se".
itens de alinhamento
Esta propriedade determina o alinhamento dos itens nas células ao longo do eixo da caixa (coluna, vertical) (em oposição à propriedade "justify-items", que determina o alinhamento ao longo do eixo da linha (horizontal)). O valor desta propriedade se aplica a todos os elementos do contêiner.
.container {
align-items: start | end | center | stretch;
}
- início - os elementos são deslocados para o início de suas células (borda superior)
- final - os elementos são deslocados para o final das células (borda inferior)
- centro - os itens são centrados
- esticar - os elementos preenchem toda a altura das células
.container {
align-items: start;
}

.container {
align-items: end;
}

.container {
align-items: center;
}

.container {
align-items: stretch;
}

A posição de um elemento individual ao longo do eixo da coluna da célula é controlada pela propriedade "align-self".
itens de lugar
Esta propriedade é uma abreviação para itens de alinhamento e itens de justificação.
.container {
place-items: <align-items> <justify-items>;
}
- <align-items> <justify-items> é o primeiro valor para itens de alinhamento, o segundo para itens de justificação. Se não houver um segundo valor, o primeiro valor será atribuído a ambas as propriedades.
Exemplo:
.container {
place-items: center start;
}
Os itens são centralizados ao longo do eixo da coluna e na origem ao longo do eixo da linha.
justify-content (alinhamento da coluna)
Às vezes, a largura total dos elementos da grade (suas colunas) é menor que a largura do contêiner. Isso pode acontecer ao definir elementos de tamanho fixo (usando px, por exemplo). Nesse caso, podemos definir a ordem das colunas da grade no contêiner. Esta propriedade determina o alinhamento da Grade ao longo do eixo da linha - o alinhamento das colunas (em oposição à propriedade "align-content", que determina o alinhamento da Grade ao longo do eixo da caixa (coluna) - o alinhamento das linhas).
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
- start - muda a grade para o início do contêiner (borda esquerda)
- end - move a grade para o final do contêiner (borda direita)
- center - a grade está centrada
- stretch — ,
- space-around — ,
- space-between — , — ,
- space-evenly — ,
.container {
justify-content: start;
}

.container {
justify-content: end;
}

.container {
justify-content: center;
}

.container {
justify-content: stretch;
}

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

.container {
justify-content: space-between;
}

.container {
justify-content: space-evenly;
}

align-content ( )
Às vezes, a altura total dos elementos Grid (suas linhas) é menor que a altura do contêiner. Isso pode acontecer ao definir elementos de tamanho fixo (usando px, por exemplo). Nesse caso, podemos determinar a ordem das linhas da grade no contêiner. Esta propriedade determina o alinhamento da Grade ao longo do eixo da caixa (coluna) - o alinhamento das linhas (em oposição à propriedade "justify-content", que determina o alinhamento da Grade ao longo do eixo embutido - o alinhamento das colunas).
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
- start - muda a grade para o início do contêiner (borda superior)
- fim - desloca a grade para o final do contêiner (borda inferior)
- center - a grade está centrada
- esticar - as linhas são esticadas de modo que a grade ocupe toda a altura do contêiner
- espaço ao redor - espaço igual entre as linhas e metade desse espaço ao redor das bordas do contêiner
- espaço entre - a primeira linha é deslocada para o início do contêiner, a última - para o final, o espaço livre é distribuído uniformemente entre o resto das linhas
- espaço-uniformemente - espaço igual entre as linhas e nas bordas do contêiner
.container {
align-content: start;
}

.container {
align-content: end;
}

.container {
align-content: center;
}

.container {
align-content: stretch;
}

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

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

.container {
align-content: space-evenly;
}

lugar-conteúdo
Esta propriedade é a abreviação de align-content e justify-content.
.container {
place-content: <align-content> <justify-content>;
}
- <align-content> <justify-content> é o primeiro valor para align-content, o segundo é para justify-content. Se não houver um segundo valor, o primeiro valor será atribuído a ambas as propriedades.
Exemplo:
.container {
place-content: center start;
}
As linhas são centralizadas no contêiner, as colunas no início.
grade-auto-colunas, grade-auto-linhas (tamanho das trilhas implícitas)
Essas propriedades determinam o tamanho das trilhas geradas automaticamente (trilhas implícitas). Trilhas implícitas são criadas quando há mais itens do que células na Grade ou quando um item é colocado fora da Grade.
.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}
- <track-size> - comprimento, porcentagem ou frações do espaço livre da grade (usando a unidade "fr")
Exemplo:
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}

Isso cria uma grade 2x2.
Digamos que usamos as propriedades "grid-column" e "grid-row" para posicionar itens como este:
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}

O elemento com a classe "item-b" começa com a linha vertical 5 e termina com a linha vertical 6, mas não definimos essas linhas. Como estamos referenciando linhas inexistentes, trilhas implícitas de largura zero são criadas para preencher os recuos. Podemos usar a propriedade "grid-auto-columns" para definir a largura das trilhas implícitas:
.container {
grid-auto-columns: 60px;
}

grid-auto-flow
O algoritmo de colocação automática pode ser usado para posicionar itens fora da grade. A propriedade em questão determina como esse algoritmo deve funcionar.
.container {
grid-auto-flow: row | column | row dense | column dense;
}
- linha (padrão) - o algoritmo preenche a linha atual até o limite e, se necessário, quando a largura da linha atual não é suficiente, cria uma nova linha
- coluna - o algoritmo preenche a coluna atual até o limite e, se necessário, quando a altura da coluna atual é insuficiente, cria uma nova coluna
- denso - enchimento inteligente da Grade quando há elementos de tamanhos diferentes
Observe que a densidade altera a ordem visual dos elementos, o que pode ter um impacto negativo na acessibilidade.
Vamos supor que temos a seguinte marcação:
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
Definimos uma grade com cinco colunas e duas linhas e configuramos a propriedade "grid-auto-flow" para "linha" (que é o padrão):
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
Ao colocar itens na grade, colocamos apenas dois itens:
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
Como o valor da propriedade "grid-auto-flow" é "row", nosso Grid se parece com a imagem abaixo. Preste atenção na disposição dos elementos com as classes "item-b", "item-c" e "item-d" (é dada preferência às linhas):

Se você alterar o valor da propriedade "grid-auto-flow" para "coluna", a Grade ficará assim forma (é dada preferência às colunas):

rede
Esta propriedade é uma abreviação para linhas de modelo de grade, colunas de modelo de grade, áreas de modelo de grade, linhas automáticas de grade, colunas automáticas de grade e fluxo automático de grade (note que uma declaração pode conter apenas propriedades "explícitas" ou "implícitas").
- nenhum - todas as propriedades aceitam valores padrão
- <grid-template> - semelhante à abreviação do modelo de grade
- <grid-template-rows> / [auto-flow && dense?] <grid-auto-columns>? - define o valor para linhas de modelo de grade. Se a palavra-chave "fluxo automático" estiver à direita da barra, o valor da propriedade "fluxo automático da grade" torna-se "coluna". Se a palavra-chave “denso” for especificada além do fluxo automático, o algoritmo de aninhamento automático empacota os itens de acordo. Se o valor da propriedade "grid-auto-columns" for omitido, seu valor se tornará "auto"
- [fluxo automático && denso?] <grid-auto-rows>? / <grid-template-columns> - Define o valor para as colunas do modelo de grade. Se a palavra-chave "fluxo automático" estiver à esquerda da barra, o valor da propriedade "fluxo automático da grade" se tornará "linha". Se a palavra-chave “denso” for especificada além do fluxo automático, o algoritmo de aninhamento automático empacota os itens de acordo. Se o valor da propriedade "grid-auto-rows" for omitido, seu valor se tornará "auto"
Os dois blocos de código a seguir são equivalentes:
.container {
grid: 100px 300px / 3fr 1fr;
}
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}
Os dois blocos de código a seguir são equivalentes:
.container {
grid: auto-flow / 200px 1fr;
}
.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}
Os dois blocos de código a seguir são equivalentes:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}
E os dois blocos de código a seguir também são equivalentes:
.container {
grid: 100px 300px / auto-flow 200px;
}
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
Neste caso, podemos usar uma sintaxe mais complexa, mas ao mesmo tempo mais conveniente para definir simultaneamente as propriedades "grid-template-areas", "grid-template-rows" e "grid-template-colunas" e definir outras propriedades para os valores padrão ... O que você precisa fazer para isso é definir os nomes das linhas e os tamanhos das faixas com as áreas correspondentes em uma linha. Isso é mais fácil de demonstrar com um exemplo:
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
Isso é equivalente ao seguinte:
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}
Propriedades do item de grade
Observe que as propriedades float, display: inline-block, display: table-cell, vertical-align e column- * aplicadas a um elemento da grade não têm efeito.
grid-column-start, grid-column-end, grid-row-start, grid-row-end
Essas propriedades determinam a posição de um elemento na grade ao encaixar em linhas específicas. grid-column-start / grid-row-start são as linhas iniciais do item e grid-column-end / grid-row-end são as linhas finais.
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
- <line> - pode ser um número (ajustado ao número da linha) ou nome (ajustado ao nome da linha)
- span <number> - o elemento será esticado para o número especificado de faixas
- span <nome> - o elemento irá se esticar até atingir a linha com o nome especificado
- auto - layout automático, expansão automática ou extensão padrão de uma coluna
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}

.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}

Se nenhum valor de propriedade grid-column-end / grid-row-end for especificado, o item ocupará 1 trilha por padrão.
Os elementos podem se sobrepor. Você pode usar a propriedade z-index para controlar a ordem de empilhamento dos elementos.
grade-coluna, grade-linha
Essas propriedades são abreviações para grid-column-start + grid-column-end e grid-row-start + grid-row-end, respectivamente.
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
- <start-line> / <end-line> - os valores são iguais às propriedades originais, incluindo o intervalo
Exemplo:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}

Se nenhuma linha final for especificada, o elemento será padronizado para 1 trilha.
área de grade
Esta propriedade define o nome do elemento, que é usado como valor na propriedade grid-template-areas. grade-área também pode ser usada como abreviação para grade-linha-início + grade-coluna-início + grade-linha-fim + grade-coluna-fim.
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
- <name> - nome arbitrário do elemento
- <row-start> / <column-start> / <row-end> / <column-end> - podem ser números ou nomes de linha
Nomeando um elemento:
.item-d {
grid-area: header;
}
Abreviação de grid-row-start + grid-column-start + grid-row-end + grid-column-end:
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}

justificar-se
Esta propriedade especifica o alinhamento de um elemento em uma célula ao longo do eixo da linha (em oposição à propriedade align-self, que especifica o alinhamento ao longo do eixo da caixa (coluna)). Esta propriedade se aplica a um elemento em uma única célula.
.item {
justify-self: start | end | center | stretch;
}
- início - o elemento é deslocado para o início da célula (borda esquerda)
- end - o elemento é deslocado para o final da célula (borda direita)
- center - o elemento é centrado
- esticar - o elemento preenche toda a largura da célula
.item-a {
justify-self: start;
}

.item-a {
justify-self: end;
}

.item-a {
justify-self: center;
}

.item-a {
justify-self: stretch;
}

A propriedade justify-items é usada para controlar o alinhamento de todos os itens da grade ao longo do eixo da linha.
alinhar-se
Esta propriedade determina o alinhamento de um item em uma célula ao longo do eixo da caixa (coluna) (em oposição à propriedade justify-self, que determina o alinhamento ao longo do eixo da linha). Esta propriedade se aplica a um elemento em uma única célula.
.item {
align-self: start | end | center | stretch;
}
- início - o elemento é deslocado para o início da célula (borda superior)
- end - o elemento é deslocado para o final da célula (borda inferior)
- center - o elemento é centrado
- esticar - o elemento preenche toda a altura da célula
.item-a {
align-self: start;
}

.item-a {
align-self: end;
}

.item-a {
align-self: center;
}

.item-a {
align-self: stretch;
}

A propriedade align-items é usada para controlar o alinhamento de todos os itens da grade ao longo do eixo do bloco (coluna).
colocar-se
Esta propriedade é uma abreviatura para alinhar-se e justificar-se.
- auto - valor padrão
- <align-self> / <justify-self> é o primeiro valor para alinhar-se, o segundo para justificar-se. Se o segundo valor for omitido, o primeiro valor será aplicado a ambas as propriedades
.item-a {
place-self: center;
}

.item-a {
place-self: center stretch;
}

- , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
- , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
- repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
- A combinação desses recursos permite incrível flexibilidade de layout, por exemplo: grid-template-columns: repeat (auto-fill, minmax (200px, 1fr)) (do exemplo no início da seção Grid)
Recursos Úteis
Apoio, suporte

Tutorial
Neste tutorial, criaremos um treinador simples para propriedades básicas do Flexbox.

Markup
<main>
<div id="controls">
<div id="buttons">
<button data-btn="addBtn">Add Item</button>
<button data-btn="removeBtn">Remove Item</button>
</div>
<fieldset id="flexContainerProps">
<legend>Flex Container Props</legend>
<label for="flexDirection">flex-direction</label>
<select id="flexDirection">
<option value="row" selected>row</option>
<option value="row-reverse">row-reverse</option>
<option value="column">column</option>
<option value="column-reverse">column-reverse</option>
</select>
<label for="flexWrap">flex-wrap</label>
<select id="flexWrap">
<option value="nowrap">nowrap</option>
<option value="wrap" selected>wrap</option>
<option value="wrap-reverse">wrap-reverse</option>
</select>
<label for="justifyContent">justify-content</label>
<select id="justifyContent">
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" selected>center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
</select>
<label for="alignItems">align-items</label>
<select id="alignItems">
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" selected>center</option>
<option value="stretch">stretch</option>
<option value="baseline">baseline</option>
</select>
<label for="alignContent">align-content</label>
<select id="alignContent">
<option value="flex-start" selected>flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="stretch">stretch</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
</select>
</fieldset>
<fieldset id="flexItemProps">
<legend>Flex Item Props</legend>
<label for="order">order</label>
<input
id="order"
type="number"
min="-5"
max="5"
step="1"
value="0"
/>
<label for="flexGrow">flex-grow</label>
<input
id="flexGrow"
type="number"
min="0"
max="5"
step="1"
value="0"
/>
<label for="flexShrink">flex-shrink</label>
<input
id="flexShrink"
type="number"
min="1"
max="6"
step="1"
value="1"
/>
<label for="alignSelf">align-self</label>
<select id="alignSelf">
<option value="auto" selected>auto</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="stretch">stretch</option>
<option value="baseline">baseline</option>
</select>
</fieldset>
</div>
<div id="flexContainer">
<div class="flex-item selected">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</main>
Aqui temos um flexContainer com seis flex-items e controles para controlar a alternância das propriedades de flexContainerProps e flexItemProps selecionados. Também no segundo container, você tem dois botões: um para adicionar um elemento ao flex container (addBtn), o outro para remover o último elemento flex (removeBtn).
Estilos
main {
display: flex;
justify-content: center;
align-items: center;
}
#controls {
margin-right: 0.4rem;
}
#buttons {
margin: 0.4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button {
margin: 0.2rem;
}
label {
display: block;
margin: 0.4rem;
}
select {
width: 100%;
}
#flexContainer {
width: 600px;
height: 600px;
border: 1px dashed #222;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item {
min-width: 178px;
min-height: 178px;
background: radial-gradient(circle, yellow, orange);
border: 1px solid #222;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
color: #222;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
}
.flex-item:nth-child(2n) {
min-width: 158px;
min-height: 158px;
}
.flex-item:nth-child(3n) {
min-width: 198px;
min-height: 198px;
}
.flex-item.selected {
background: radial-gradient(circle, lightgreen, darkgreen);
}
Os elementos flexíveis devem ser de tamanhos diferentes e flexíveis ao mesmo tempo. Conseguimos isso com min-width / min-height e nth-child. O item selecionado é da classe "selecionado" com uma cor de fundo diferente.
Roteiro
//
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')
//
buttons.addEventListener('click', (e) => {
//
if (e.target.tagName !== 'BUTTON') return
//
const { btn } = e.target.dataset
switch (btn) {
// -
case 'addBtn':
// 6
// -
//
const num = document.querySelectorAll('.flex-item').length + 1
// , 7
//
if (num < 7) {
// "div"
const newItem = document.createElement('div')
//
newItem.className = 'flex-item'
//
newItem.textContent = num
// -
flexContainer.append(newItem)
}
break
// -
case 'removeBtn':
//
const index = document.querySelectorAll('.flex-item').length - 1
// , 0
// -
if (index > 0) {
// ,
const itemToRemove = document.querySelectorAll('.flex-item')[index]
//
itemToRemove.remove()
}
break
}
})
//
controls.addEventListener('change', (e) => {
//
const prop = e.target.id
//
const value = e.target.value
// ,
// - -
//
if (e.target.parentElement.id === 'flexContainerProps') {
flexContainer.style[prop] = value
} else {
const selectedItem = document.querySelector('.selected')
selectedItem.style[prop] = value
}
})
// -
flexContainer.addEventListener('click', (e) => {
// -
if (
e.target.className !== 'flex-item' ||
e.target.classList.contains('selected')
)
return
// "selected"
if (document.querySelector('.selected') !== null)
document.querySelector('.selected').classList.remove('selected')
//
e.target.classList.add('selected')
// - "-"
//
// -
//
// ,
//
// -
const getStyle = (property, element = e.target) =>
getComputedStyle(element).getPropertyValue(property)
// , DOM-, "id",
// ,
order.value = getStyle('order')
flexGrow.value = getStyle('flex-grow')
flexShrink.value = getStyle('flex-shrink')
alignSelf.value = getStyle('align-self')
})
Como você pode ver, nada complicado. Claro, a funcionalidade do simulador resultante é muito limitada. No entanto, suponho que isso seja suficiente para compreender as propriedades básicas do Flexbox.
Eu recomendo que você tente criar um simulador semelhante para as propriedades básicas do Grid - esta será uma excelente prática e permitirá que você entenda tudo corretamente.
Você também pode achar interessante um de meus projetos recentes, o Modern HTML Starter Template .
Obrigado pela atenção e tenha um bom dia.