Aula em video:

Inscreva-se no canal!

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