cefet_front_end

CSS parte 4

Display, Flexbox e Grid 🐸🥕

Na última aula (1/3)

Formatos de Imagens
- JPEG (ou JPG), bom para fotos tiradas do mundo real, que possuem muita variação de cor. Não possui transparência
- GIF , transparência de 1 bit e suporta animações de quadros
  - Apenas 256 cores na imagem (muito pouco!!)
- PNG , transparência de 8 bits e suporta mais cores que GIF
  - Bom formato para imagens com pouca variação de cor
- SVG , imagens vetoriais que não perdem qualidade se ampliadas

Na última aula: vídeos (2/3)

<video src="videos/fendadobiquini.mp4" controls></video>

Para aumentar a compatibilidade:

<video width="320" height="240" controls>
  <source src="bob-esponja.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="bob-esponja.webm" type="video/webm; codecs=vp8,vorbis">
  Seu navegador não suporta o elemento video.
</video>

O navegador tentará abrir o vídeo bob-esponja.mp4 (i.e., o primeiro)
- se não conseguir, tentará o arquivo bob-esponja.webm (2º)
- se, mesmo assim, não conseguir, será exibido o texto

Na última aula: Web Fonts (3/3)

Descrever a fonte no arquivo CSS usando @font-face {...}:

@font-face {
  font-family: "Emblema One";    /* dando um nome à fonte */
  src: url("fonts/EmblemaOne-Regular.woff2") format('woff2'), /* 1º formato */
       url("fonts/EmblemaOne-Regular.ttf")   format('ttf');   /* 2º formato */
}

Usar a fonte:
```
h1 {
  font-family: "Emblema One", sans-serif;
}
```
- Sempre coloque uma segunda opção (e.g., sans-serif)

Roteiro de hoje

Propriedade display
Flexbox
Grid

A propriedade display

e seus diversos valores

Valores:
- block
- inline
- inline-block
- none
- table
- table-row
- table-cell
- flex e inline-flex
- grid e inline-grid

A propriedade display (na MDN)

Define o tipo de visualização de um elemento e também seu comportamento no fluxo da página
Os valores mais “tradicionais”
- block, para definir um elemento com comportamento block
- inline, similarmente, para inline
- inline-block, similar a block, porém sem quebra de linha
- none, sem renderização
Veremos esses primeiro, depois table-* e os bacanões flex e grid

A propriedade display (cont.)

É possível, por exemplo:
```
div { display: inline; }
span { display: block; }
```
- Mas é claro que você não vai fazer isso… ;)
Para remover um elemento do fluxo e não renderizá-lo de forma alguma:
```
a[href*="xxx"] { display: none; }
```

Display: inline-block

Une a capacidade de se definir dimensões de block e a possibilidade de ter um fluxo lateral (sem quebra de linha), como inline. Exemplo:

<div class="passo">Instalar</div>
<div class="passo">Aprender</div>
<div class="passo">Programar</div>

.passo {
  display: inline-block;
  width: 150px;
  height: 150px; /* ... */
}

Resultado do display inline-block

Display: table-*

Alguns valores são para a criação de layouts em formato de tabelas:
- table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, inline-table
Veja alguns exemplos de uso no link

Hoje em dia: preferimos flex ou grid ;)

Flexbox

Layouts de 1D

flex, inline-flex
Propriedades acessórias
Exemplos

Display: flex e inline-flex

Mais recentemente, o CSS3 introduziu o flexbox
É uma forma bem flexível para dispor os elementos
Cria uma linha (row) ou coluna (column) com filhos
Além de display: flex e display: inline-flex, foram introduzidas outras propriedades. Exemplos:

flex-direction ~ row (padrão), column, row-reverse, column-reverse ~ dispõe filhos na horizontal (se row) ou vertical (column)

justify-content ~ flex-start (padrão), center, space-around, space-between… ~ define como distribuir o espaço que sobrou

align-items ~ stretch (padrão), flex-start, center… ~ define posição dos elementos no “contraeixo”

Exemplo com flexbox: lista horizontal

ul.horizontal {
  display: flex;
  justify-content: space-around;

  /* tirar coisas que vem na <ul> */
  list-style-type: none;
  padding-left: 0;
}

ul.horizontal > li {
  flex: 1; /* crescer com peso 1 */
  
  /* espacinho e centralização */
  margin-right: 4px;
  text-align: center;
}

result . text-align: center
- Abacaxi
- Kiwi
- Maçã
- Uva
- Limão
Colocamos display: flex no pai
Faz os filhos se comportarem de um jeito diferente
Vamos usar outras propriedades (além de display). Ex:
1. flex-direction (linha ou coluna)
2. justify-content (como dist. espaço)
3. flex-wrap (continuar na próxima linha ou coluna?)

Como funciona o flexbox (1/3)

Ideia: habilidade do elemento alterar o tamanho de seus filhos (e ordem) para ocupar o espaço disponível
Há propriedades para o elemento flex e para seus filhos
- Apenas o pai tem display: flex

flex-direction define o eixo principal e o contraeixo

flex-wrap se precisar quebra linha?

Como funciona o flexbox (2/3)

justify-content distribui espaço em branco no eixo principal

align-items alinhamento no contraeixo

align-content distribui espaço em branco no contraeixo

Só se flex-wrap !== nowrap

Como funcionam os filhos de flexbox (3/3)

flex define o peso do elemento no eixo na hora de definir seu tamanho

⬆️ na verdade, é atalho para flex-grow, flex-shrink e flex-basis

align-self alinhamento no contraeixo apenas deste filho

gap define um espaço mínimo entre filhos

order define uma ordem diferente da do código fonte

Grid

Layouts de 2D

Propriedades acessórias
Exemplos
Grid Garden

CSS Grid Layout

Flexbox é ótimo para layouts de 1 dimensão (linhas ou colunas)
Grid cria layouts de 2 dimensões (linhas e colunas)
Além de display: grid (e inline-grid), várias novas propriedades foram introduzidas
Há propriedades para o elemento grid e para os filhos de grid
- Algumas propriedades do Flexbox também são usadas
Deve-se definir as linhas e colunas e seus tamanhos

Exemplo usando `grid`

HTML

<main>
  <header></header>
  <nav></nav>
  <section></section>
  <footer></footer>
</main>

CSS (elemento pai)

main {
  display: grid;
  grid-template-rows: 200px 1fr auto;
  grid-template-columns: 300px 1fr;
}

CSS (dos filhos)

 header {
   grid-column: 1 / 3;
 }

 nav {
   grid-column: 1 / 2;
   grid-row: 2 / 3;
 }
 section {
   grid-column: 2 / 3;
   grid-row: 2 / 3;
 }
 footer {
   grid-column: 1 / 3;
   grid-row: 3 / 4;
 }

Conheça o Grid Garden 🥕

Conceitos sobre Grid

Elemento grid: aquele que tem display: grid ou inline-grid
Filho de grid: todos os filhos diretos de um elemento grid

Calha: traço entre linhas ou colunas (ou início/final)
Célula: espaço entre quatro calhas

Trilha: linha ou coluna
Área: conjunto adjacente e retangular de células

Como funciona o Grid (1/3)

grid-template-columns, grid-template-rows definem quantidade e tamanho de colunas e linhas

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

grid-column, grid-row especifica as calhas da célula onde o filho será colocado

 .item-a {
   grid-column: 2 / 5;
   grid-row: 1 / 3;
 }

Como funciona o Grid (2/3)

grid-template-areas dá nomes às áreas da grid

  .container {
    display: grid;
    grid-template-columns: repeat(1fr, 4);
    grid-template-rows: repeat(1fr, 3);
    grid-template-areas: 
      "header header header header"
      "main main . sidebar"
      "footer footer footer footer";
  }

Um . é uma célula vazia
repeat(n, valor) é um atalho

grid-area especifica nome da área onde o filho será colocado

   .item-a {
     grid-area: header;
   }
   .item-b {
     grid-area: main;
   }
   .item-c {
     grid-area: sidebar;
   }
   .item-d {
     grid-area: footer;
   }

Como funciona o Grid (3/3)

Além dessas propriedades, há várias outras
1. gap: define espaço entre linhas e colunas
```
.container {
  gap: 15px 10px;
}
```

justify-items
align-items
justify-content
align-content
grid-auto-columns, grid-auto-rows
justify-self
align-self
Veja o guia completo de Grid em CSS Tricks

Referências

Guia completo de Flexbox em CSS Tricks
Guia completo de Grid em CSS Tricks