Aula em video:

Aula 3 – Layout

Display

Controla como o elemento é exibido, propriedades como altura,
largura, quebra de linha, e alinhamento.

Inline

O elemento tem o tamanho exato que necessita, não começa em uma linha, e top/bottom paddings/margins não são respeitados

Block

A altura e largura do elemento podem ser definidos, e começa em uma nova linha.

Inline-Block

A altura e largura do elemento podem ser definidos, e não começa em uma nova linha.

Flexbox

Um tipo de display flexível onde os elementos estão organizados em uma coluna ou linha

Flex-container

É a área onde os elementos vão ser exibidos. É neste elemento que será definido a propriedade display:

Flex-direction

Define a direção em que os filhos vão ser exibidos pode ser:

• Column (Filhos são organizados na vertical)
• Column-reverse (Filhos também são organizados na vertical mas de baixo para cima)
• Row (Filhos são organizados na horizontal)
• Row-reverse (Filhos também são organizados na vertical mas da direita para a esquerda)

Flex-Wrap

Define se os filhos vão ser forçados a ficar em uma linha ou se podem expandir em outras direções.

• Nowrap (Filhos serão forçados a ficar na mesma linha)
• Wrap (Filhos podem expandir para outra linha se necessário)
• Wrap-reverse (Filhos irão expandir na direção oposta se necessário para esquerda e para cima)

Flex-Flow

Combina flex-direction e flex-wrap em uma propriedade.

• Flex-Flow <flex-direction> <flex-wrap>

Justify-Content

Alinha os itens no eixo principal.

• Center (itens ficam centralizados)
• Flex-start (itens são alinhados ao começo do flex-container)
• Flex-end (itens são alinhados ao final do flex-container)
• Space-around (itens têm uma margem igual nos dois sentidos)
• Space_between (itens ficam o mais distante possível dos outros)

Align-Items

Alinha os itens no eixo perpendicular

• Center (itens ficam centralizados)
• Flex-start (itens são alinhados ao começo do flex-container)
• Flex-end (itens são alinhados ao final do flex-container
• Stretch (itens são esticados para preencher o flex-container)
• Baseline (itens são alinhados na linha base do texto, o texto fica na mesma altura)

Align-Content

Usado para alinhar as linhas caso existam mais de uma

• Center (linhas ficam centralizados)
• Flex-start (linhas são alinhados ao começo do flex-container)
• Flex-end (linhas são alinhados ao final do flex-container)
• Space-around (linhas têm uma margem igual nos dois sentidos)
• Space-between (linhas ficam o mais distante possível dos outros)
• Stretch (linhas são esticados para preencher o flex-container)

Flex-Item

Todos os filhos de um flex-container, não é necessário definir nenhuma propriedade no próprio elemento.

Order

Define a posição do item no container

• order: <número da posição>

Flex-grow

Define quanto o item cresce em relação aos outros, se necessário

• Flex-grow: <número de vezes que o elemento cresce em relação aos outros>

Flex-shrink

Define quanto o item diminui em relação ao outros se necessário

• flex-shrink: <número de vezes que o elemento diminui em relação aos outros>

Flex-basis

Define o tamanho inicial do item

• Flex-basis: <tamanho inicial do item>

Flex

Combina flex-grow, flex-shrink e flex-basis em uma propriedade

• flex: <flex-grow> <flex-shrink> <flex-basis>

Align-self

Define o alinhamento do item na direção oposta do flex-container

• Center (item fica centralizado_
• flex-start (item é alinhado ao começo do flex-container)
• flex-end (item é alinhando ao final do flex-container)

Grid

Um tipo de display que oferece uma forma de organizar itens em uma grade com linhas e colunas

Grid-container

É a área onde os elementos vão ser exibidos. É neste elemento que será definido a propriedade display: grid

Grid-template-columns

Define a quantidade de colunas e a largura das mesmas.

• grid-template-columns: <tamanho da coluna> <tamanho da coluna> (a opçãoauto deixa a coluna com largura automática)

Grid-template-rows

• grid-template-rows: <tamanho da linha> < tamanho da linha> (a opção auto deixa a linha com altura automática)

Justify-content

Alinha o grid dentro do container na horizontal

• center (grid fica no centro)
• start (grid alinhado à esquerda)
• end (grid alinhado à direita)
• space-around (dá espaço igual ao redor das colunas)
• space-between (dá espaço igual entre as colunas)
• space-evenly (dá espaço igual entre e ao redor das colunas)

Aling-content

Alinha o grid verticalmente dentro do container

• center (grid fica no centro)
• start (grid alinhado à cima)
• end (grid alinhado à baixo)
• space-around (dá espaço igual ao redor das linhas)
• space-between (dá espaço igual entre as linhas)
• space-evenly (dá espaço igual entre e ao redor das linhas)

Row-gap

Define o espaço entre as linhas

• row-gap: <tamanho do espaço>

Column-gap

Define o espaço entre as colunas

• column-gap: <tamanho do espaço>

Gap

Combina row-gap e column-gap em uma única propriendade.

• gap: <row-gap> <column-gap>
• gap: <tamanho do espaço> (define um espaço para linhas e colunas)

Grid-item

Todos os filhos de um grid-container, não é necessário definir nenhuma propriedade no próprio elemento.

Grid-column

Define qual intervalo de colunas um item deve ocupar

• grid-column: <coluna onde começa> / <coluna onde termina> (adicionando a palavra-chave “span” na coluna onde termina a mesma será incluída no item)

Grid-row

Define qual intervalo linhas um item deve ocupar

• grid-row: <linha onde começa> / <linha onde termina> (adicionando a palavra-chave “span” na linha onde termina a mesma será incluída no item)

Grid-area

Combina as propriedades de grid-column e grid-row

• grid-area: <linha onde começa> / <colunas onde começa> / <linha onde termina> / <coluna onde termina>

Exemplo HTML

Exercício

Usar os conceitos de display abordados na aula para formatar a página “exercicio.html” de forma que os cartões de viagem fiquem alinhados como em “exemplo.html”

Arquivos da aula

https://drive.google.com/drive/folders/1QxIA5orjq2oOWblAt1K_tkSDhcLF-tjQ?usp=sharing