Printing - CSS

Printing
========

Pode haver momentos em que seu site ou aplicação queira melhorar a experiência do usuário quando imprime um conteúdo. Existem diversos cenários possíveis:

* Você deseja ajustar o layout para tirar vantagem do tamanho e forma do papel.
* Você deseja usar diferentes estilos para melhorar a aparência do seu conteúdo no papel.
* Você deseja aumentar a resolução das imagens para um melhor resultado.
* Você quer ajustar a experiência do usuário de impressão, como apresentar uma versão especialmente formatada de seu conteúdo antes da impressão começar.

Podem haver outros casos onde você precisa gerenciar o processo de impressão, mas estes são alguns dos cenários mais comuns. Este artigo ensina dicas e técnicas para te ajudar a imprimir conteudo web de uma melhor forma.

Usando uma folha de estilos para impressão
------------------------------------------

Adicione o seguinte código dentro da tag `<head>`.
```

<link href="/path/to/print.css" media="print" rel="stylesheet" />
```

Usando media queries para melhorar o layout
-------------------------------------------

Detectando requisições de impressão
-----------------------------------

Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventos `beforeprint` e `afterprint` para permitir que o conteúdo determine quando a impressão deve ocorrer. Você pode usar isto para ajustar a interface presente durante a impressão (como a exibição ou ocultação de elementos de interface do usuário durante o processo de impressão).

**Nota:** Você também pode usar `window.onbeforeprint` (en-US) e `window.onafterprint` (en-US) para atribuir manipuladores para esses eventos, mas usando `EventTarget.addEventListener()` é preferível.

Exemplos
--------

Aqui estão alguns exemplos comuns.

#### Abrir e fechar automaticamente uma janela popup quando finalizado

If you want to be able to automatically close a popup window (en-US) (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:

```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript Window Close Example</title>
    <script type="text/javascript">
 function popuponclick() {
 my\_window = window.open(
 "",
 "mywindow",
 "status=1,width=350,height=150",
 );
 my\_window.document.write("<html><head><title>Print Me</title></head>");
 my\_window.document.write('<body onafterprint="self.close()">');
 my\_window.document.write(
 "<p>When you print this window, it will close afterward.</p>",
 );
 my\_window.document.write("</body></html>");
 }
 </script>
  </head>
  <body>
    <p>
      To try out the <code>afterprint</code> event, click the link below to open
      the window to print. You can also try changing the code to use
      <code>beforeprint</code> to see the difference.
    </p>
    <p><a href="javascript: popuponclick()">Open Popup Window</a></p>
  </body>
</html>
```

Ver Exemplo

### Imprimir uma página externa sem abri-la

If you want to be able to print an external page without opening it, you can utilize a hidden `<iframe>` (see: HTMLIFrameElement (en-US)), automatically removing it after the user prints its contents. The following is a possible example which will print a file named `externalPage.html`:

```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MDN Example</title>
    <script type="text/javascript">
 function closePrint() {
 document.body.removeChild(this.\_\_container\_\_);
 }

 function setPrint() {
 this.contentWindow.\_\_container\_\_ = this;
 this.contentWindow.onbeforeunload = closePrint;
 this.contentWindow.onafterprint = closePrint;
 this.contentWindow.focus(); // Required for IE
 this.contentWindow.print();
 }

 function printPage(sURL) {
 var oHiddFrame = document.createElement("iframe");
 oHiddFrame.onload = setPrint;
 oHiddFrame.style.position = "fixed";
 oHiddFrame.style.right = "0";
 oHiddFrame.style.bottom = "0";
 oHiddFrame.style.width = "0";
 oHiddFrame.style.height = "0";
 oHiddFrame.style.border = "0";
 oHiddFrame.src = sURL;
 document.body.appendChild(oHiddFrame);
 }
 </script>
  </head>

  <body>
    <p>
      <span
 onclick="printPage('externalPage.html');"
 style="cursor:pointer;text-decoration:underline;color:#0000ff;"
 >Print external page!</span
 >
    </p>
  </body>
</html>
```

**Nota:** Older versions of Internet Explorer cannot print the contents of a hidden `<iframe>`.

Veja também
-----------

* `window.print` (en-US)
* `window.onbeforeprint` (en-US)
* `window.onafterprint` (en-US)
* Media queries (en-US)
* `@media` (en-US)


Usando Media Queries - CSS

Usando Media Queries
====================

Uma **media query** consiste de um *media type* e pelo menos uma expressão que limita o escopo das folhas de estilo usando *media features*, tal como largura, altura e cor. *Media queries*, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

Sintaxe
-------

*Media queries* consistem de um *media type (en-US)* e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em *media features*, que determinam ou verdadeiro ou falso. Os resultados da *query* são verdadeiros se o *media type* especificado na *media query* corresponde ao tipo do documento exibido no dispositivo e todas as expressões na *media query* são verdadeiras.

```html
<!-- CSS media query em um elemento de link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
```

```css
/\* CSS media query dentro de um stylesheet \*/
@media (max-width: 600px) {
  .facet\_sidebar {
    display: none;
  }
}
```

Quando uma *media query* é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com *media queries* ligadas a tag <link> vão fazer download mesmo se suas *medias queries* retornarem falso (eles não se aplicam, no entanto).

A menos que você use os operadores `not` ou `only`, o *media type* é opcional e o tipo `all` será implícito.

### Operadores lógicos

Você pode compor *media queries* complexos usando operadores lógicos, incluindo `not`, `and`, e `only`. O operador `and` é usado para combinar múltiplas *media features* em uma mesma *media query*, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a *query* seja verdadeiro. O operador `not` é usado para negar uma *media query* inteira. O operador `only` é usado para aplicar um estilo apenas se a *query* inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores `not` ou `only`, você tem que especificar um tipo de *media* explícito.

Você também pode combinar múltiplas *medias queries* em uma lista separadas por vírgulas, se qualquer uma das *media queries* na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador `or`.

#### and

A palavra-chave `and` é usada para combinar múltiplas *media features*, bem como combinar *media features* com *media types*. Uma *media query* básica, uma *media feature* simples com a *media type* `all`, pode parecer com isso:

```css
@media (min-width: 700px) { ... }
```

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador `and` para deixar todas as *media features* juntas.

```css
@media (min-width: 700px) and (orientation: landscape) { ... }
```

Agora, a *media query* acima vai apenas retorna verdadeira se o viewport for 700px, *wide* ou *wider* e a tela estiver em *landscape*. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for *media type* TV, você pode encadear essas *features* com a *media type* usando o operador `and`.

```css
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
```

Agora, a *media query* acima vai ser aplicada apenas se a *media type* for TV, o *viewport* for 700px *wide* ou *wider*, e a tela estiver em paisagem.

#### Listas separadas por vírgula

Listas separadas por vírgulas comportam-se como o operador `or` quando utilizadas em *media queries*. Quando utilizamos *media queries* com uma lista separada por vírgulas, se qualquer *media queries* retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada *media query* em um lista separa por vírgulas é tratada como uma *query* individual, e qualquer operador aplica em uma *media query* não afeta os outros. Isto significa que *media queries* separadas por vírgulas podem ter objetivos diferentes de *media* *features*, *types* e *states*.

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

```css
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
```

Acima, se eu estivesse em um dispositivo `screen` com um *viewport* largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como `@media all and (min-width: 700px)` será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo `screen` iria falhar no *media type* `handheld` na segunda *media query*. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um *viewport* de largura de 500px, enquanto a primeira media query falha devido a largura do *viewport*, a segunda *media query* teria sucesso e assim o *media statement* retorna verdadeiro.

#### not

A palavra chave `not` se aplica em toda a *media query* e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um `min-width: 700px` recurso consultado). Um not vai apenas negar a *media query* que é aplicada, de modo não toda a *media query* que apresente uma *media querie* com uma lista separada por vírgulas. A palavra chave `not` não pode ser usada para negar uma característica individual da *query*, apenas uma *media query* inteira. Por exemplo, o `not` é avaliado por último na *query* seguinte:

```css
@media not all and (monochrome) { ... }
```

Isto significa que a *query* é avaliada assim:

```css
@media not (all and (monochrome)) { ... }
```

... em vez disso:

```css
@media (not all) and (monochrome) { ... }
```

Um outro exemplo, veja a *media query* seguinte:

```css
@media not screen and (color), print and (color) { ... }
```

É avalida desta forma:

```css
@media (not (screen and (color))), print and (color) { ... }
```

#### only

A palavra chave *`only`* previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

```html
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
```

### Pseudo-BNF
```

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid
```

*Media queries* são *case insensitive*. *Media queries* envolvidas em *media types* desconhecidos serão sempre falsas.

**Nota:** Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.

Características de mídia
------------------------

A maioria das *media features* podem ter prefixo "min-" ou "max-" para expressar as restrições "maior ou igual" ou "menor ou igual". Isto evita o uso dos símbolos "<" e ">" , que entrem em conflito com HTML e XML. Se você usar uma *media feature* sem especificar um valor, a expressão retorna verdadeiro, se o valor da *feature* for diferente de zero.

**Nota:** Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.

### cor

**Valor:** `<color>`
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** sim

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

**Nota:** Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.

#### Exemplos

Aplicar uma folha de estilo a todos dispositivos:

```css
@media all and (color) { ... }
```

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

```css
@media all and (min-color: 4) { ... }
```

### color-index

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** Sim

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

#### Exemplos

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

```css
@media all and (color-index) { ... }
```

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

```html
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/stylesheet.css" />
```

### aspect-ratio

**Valor:** `<ratio>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** sim

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra ("/"). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

#### Exemplo

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

```css
@media screen and (min-aspect-ratio: 1/1) { ... }
```

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

### device-aspect-ratio

**Valor:** `<ratio>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** sim

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra ("/"). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

#### Exemplo

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

```css
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
```

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

### device-height

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** sim

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

#### Exemplo

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

```html
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
```

### device-width

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** sim

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

#### Exemplo

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

```html
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
```

### grid

**Valor:** `<integer>` (en-US)
**Mídia:** todas
 **Aceita prefixos min/max:** não

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

#### Exemplo

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

```css
@media handheld and (grid) and (max-width: 15em) { ... }
```

**Nota:** A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.

### height

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** yes

A característica `height` descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

**Nota:** Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features `width` e `height`.

### monochrome

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** sim

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

#### Exemplos

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

```css
@media all and (monochrome) { ... }
```

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

```css
@media all and (min-monochrome: 8) { ... }
```

### orientation

**Valor:** `landscape` | `portrait`
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Indica se o *viewport* é modo *landscape* (o visor é mais largo do que mais alto) ou *portrait* (o visor é mais alto do que mais largo).

#### Exemplo

Para aplicar a folha de estilo apenas em orientação *portrait*:

```css
@media all and (orientation: portrait) { ... }
```

**Nota:** Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.

### resolution

**Valor:** `<resolution>` (en-US)
**Mídia:** `bitmap` (en-US)
**Aceita prefixos min/max:** sim

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

#### Exemplos

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

```css
@media print and (min-resolution: 300dpi) { ... }
```

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

```css
@media screen and (min-resolution: 2dppx) { ... }
```

### scan

**Valor:** `progressive` | `interlace`
**Mídia:** `Media/TV` (en-US)
**Aceita prefixos min/max:** não

Descreve o processo de digitalização de dispositivos saída de televisão.

#### Exemplo

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

```css
@media tv and (scan: progressive) { ... }
```

### width

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**Aceita prefixos min/max:** sim

A *media feature* `width` descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

**Nota:**
 Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em *media queries* usando media features `width` e `height`.

#### Exemplos

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa *query*:

```css
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
```

Essa *media query* especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

```html
<link
 rel="stylesheet"
 media="print and (min-width: 8.5in)"
 href="http://foo.com/mystyle.css" />
```

Essa *query* especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

```css
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
```

Especificação da Mozilla para mídias características
----------------------------------------------------

Mozilla oferece várias *media features* para específicos *Gecko* . Algumas dessas podem ser sugeridas como *media features* oficiais.

### -moz-images-in-menus

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao `:-moz-system-metric(images-in-menus)` CSS pseudo-class (en-US).

### -moz-mac-graphite-theme

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
 \*\*Aceita prefixos min/max:\*\*no

Se o usuário tenha configurado seu dispositivo para usar a aparência *"Graphite"* no *Mac OS X*, o valor é 1. Se o usuário está usando a aparência padrão *blue*, ou não está num *Mac OS X*, o valor é 0.

Isto corresponde ao `:-moz-system-metric(mac-graphite-theme)` CSS pseudo-class (en-US).

### -moz-maemo-classic

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se o usuário está usando *Maemo* com o tema original, o valor é 1; Se está usando o mais novo tema *Fremantle*, o valor é 0.

Isto corresponde ao `:-moz-system-metric(maemo-classic)` CSS pseudo-class (en-US).

### -moz-device-pixel-ratio

**Valor:** `<number>`
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** sim

Dar o número de pixels do dispositivo por pixels do CSS.

**Não use este recurso.**

Em vez disso, use o recurso *`resolution`* com a unidade `dppx`.

`-moz-device-pixel-ratio` pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e `-webkit-device-pixel-ratio` com navegadores baseados no WebKit que não suportam `dppx`.

Exemplo:
```

@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
       (min-resolution: 2dppx),             /* Forma padrão */
       (min-resolution: 192dpi)             /* dppx fallback */
```

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a *`resolution`* e *`dppx`*.

**Nota:** Esta *media feature* é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.

### -moz-os-version

**Valor:** `windows-xp` | `windows-vista` | `windows-win7` | `windows-win8`
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

* `windows-xp`
* `windows-vista`
* `windows-win7`
* `windows-win8`

Isto é fornecido pelas *skins das aplicações* e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

### -moz-scrollbar-end-backward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

Isto corresponde ao `:-moz-system-metric(scrollbar-end-backward)` CSS pseudo-class (en-US).

### -moz-scrollbar-end-forward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(scrollbar-end-forward)` CSS pseudo-class (en-US).

### -moz-scrollbar-start-backward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(scrollbar-start-backward)` CSS pseudo-class (en-US).

### -moz-scrollbar-start-forward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(scrollbar-start-forward)` CSS pseudo-class (en-US).

### -moz-scrollbar-thumb-proportional

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(scrollbar-thumb-proportional)` CSS pseudo-class (en-US).

### -moz-touch-enabled

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(touch-enabled)` CSS pseudo-class (en-US).

#### Exemplo

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

### -moz-windows-classic

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(windows-classic)` CSS pseudo-class (en-US).

### -moz-windows-compositor

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(windows-compositor)` CSS pseudo-class (en-US).

### -moz-windows-default-theme

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

Isto corresponde ao `:-moz-system-metric(windows-default-theme)` CSS pseudo-class (en-US).

### -moz-windows-glass

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

### -moz-windows-theme

**Valor:** `aero` | `luna-blue` | `luna-olive` | `luna-silver` | `royale` | `generic` | `zune`
**Mídia:** `Media/Visual` (en-US)
**Aceita prefixos min/max:** não

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

* `aero`
* `luna-blue`
* `luna-olive`
* `luna-silver`
* `royale`
* `generic`
* `zune`

Isto é previsto para *skins* de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

See also
--------

* CSS 3 media query specification
* Media types (en-US)
* Using media queries from code (en-US)
* List of mobile and tablet viewport sizes with pixel ratios and physical sizes
* CSS Animations Between Media Queries by David Walsh


Aligning Items in a Flex Container - CSS

Aligning Items in a Flex Container
==================================

Uma das razões pela qual flexbox rapidamente despertou interesse dos desenvolvedores web é que ela trouxe capacidade de alinhamento apropriada para web pela primeira vez. Tem capacidade de alinhamento vertical apropriada, e assim finalmente podemos de modo fácil centralizar uma caixa. Neste guia, veremos detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.

Para centralizar nossa caixa nós usamos a propriedade `align-items` para alinhar nosso item no eixo transversal, que neste caso é o eixo do bloco indo verticalmente. Nós usamos `justify-content` para alinhar o item no eixo principal, que neste caso é o eixo indo horizontalmente.

![A containing element with another box centered inside it.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align1.png)

Você pode dar uma olhada no código deste exemplo abaixo. Altere o tamanho do container ou elemento aninhado e o elemento aninhado sempre permanece centralizado.

Propriedades que controlam o alinhamento
----------------------------------------

As propriedades que nós veremos neste guia são as seguintes.

* `justify-content` (en-US) — controla o alinhamento de todos os itens no eixo principal.
* `align-items` — controla o alinhamento de todos os itens no eixo transversal.
* `align-self` — controla o alinhamento individual de um item no eixo transversal.
* `align-content` — descrito na especificação como "packing flex lines"; controla o espaço entre as linhas no eixo transversal.

Nós também descobriremos como margens automáticas podem ser utilizadas para o alinhamento no flexbox.

**Nota:** The alignment properties in Flexbox have been placed into their own specification — CSS Box Alignment Level 3. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.

The Cross Axis
--------------

As propriedades `align-items` e `align-self` controlam o alinhamento dos nossos itens no eixo transversal, em colunas se `flex-direction` é `row` e entre linhas se `flex-direction` é `column`.

Nós estamos usando o alinhamento transversal na maioria dos exemplos. Se adicionarmos `display: flex` para um contêiner, todos os itens filhos se tornam itens flexíveis organizados em uma linha. Todos irão se esticar para serem tão altos quanto o item mais alto, pois este item define a altura dos itens no eixo transversal. Se o seu contêiner possui uma altura definida, então os itens se estenderão para esta altura, independemente da quantidade de conteúdo que está dentro deste item.

![Three items, one with additional text causing it to be taller than the others.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align2.png)

![Three items stretched to 200 pixels tall](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align3.png)

A razão pela qual os itens passam a ter a mesma altura é que o valor inicial do `align-items`, a propriedade que controla o alinhamento do eixo transversal, está definida como `stretch`.

Nós podemos usar outros valores para controlar como os itens se alinham:

* `align-items: flex-start`
* `align-items: flex-end`
* `align-items: center`
* `align-items: stretch`
* `align-items: baseline`

No exemplo abaixo, o valor do `align-items` está definido como `stretch`. Tente outros valores e veja como todos os itens se alinham no contêiner.

### Alinhando um item com `align-self`

A propriedade `align-items` adiciona a propriedade `align-self` em todos os itens flex como um grupo. Ou seja, você pode explicitamente declarar a propriedade `align-self` para impactar um único item. A propriedade `align-self` aceita todos os mesmo valores que `align-items` mais o valor `auto`, que irá resetar o valor que está configurado no container flex.

Neste próximo exemplo, o container flex possui `align-items: flex-start`, que implica em todos os itens estarem alinhados ao início do eixo transversal. Foquei no primeiro item usando o seletor `first-child` e configurei este item para `align-self: stretch`; outro item foi selecionado usando a classe `selected` e `align-self: center`. Você pode mudar o valor do `align-items` ou mudar o valor do `align-self` para focar em itens individuais para ver como funciona.

### Changing the main axis

So far we have looked at the behaviour when our `flex-direction` is `row`, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

![Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align4.png)

If we change our `flex-direction` to column, `align-items` and `align-self` will align the items to the left and right.

![Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align5.png)

You can try this out in the example below, which has a flex container with `flex-direction: column` yet otherwise is exactly the same as the previous example.

Aligning content on the cross axis — the align-content property
---------------------------------------------------------------

So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the `align-content` property to control the distribution of space between the rows. In the specification this is described as packing flex lines.

For `align-content` to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

The `align-content` property takes the following values:

* `align-content: flex-start`
* `align-content: flex-end`
* `align-content: center`
* `align-content: space-between`
* `align-content: space-around`
* `align-content: stretch`
* `align-content: space-evenly` (not defined in the Flexbox specification)

In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of `align-content` is `space-between`, which means that the available space is shared out *between* the flex lines, which are placed flush with the start and end of the container on the cross axis.

Try out the other values to see how the `align-content` property works.

Once again we can switch our `flex-direction` to `column` in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

**Nota:** the value `space-evenly` is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

See the documentation for `justify-content` on MDN (en-US) for more details on all of these values and browser support.

Aligning content on the main axis
---------------------------------

Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — `justify-content`. This is because we are only dealing with items as a group on the main axis. With `justify-content` we control what happens with available space, should there be more space than is needed to display the items.

In our initial example with `display: flex` on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of `justify-content` being `flex-start`. Any available space is placed at the end of the items.

![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align6.png)

The `justify-content` property accepts the same values as `align-content`.

* `justify-content: flex-start`
* `justify-content: flex-end`
* `justify-content: center`
* `justify-content: space-between`
* `justify-content: space-around`
* `justify-content: stretch`
* `justify-content: space-evenly` (not defined in the Flexbox specification)

In the example below, the value of `justify-content` is `space-between`. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

If the main axis is in the block direction because `flex-direction` is set to `column`, then `justify-content` will distribute space between items in that dimension as long as there is space in the flex container to distribute.

### Alignment and Writing Modes

Remember that with all of these alignment methods, the values of `flex-start` and `flex-end` are writing mode-aware. If the value of `justify-content` is `start` and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

![Three items lined up on the left](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/basics5.png)

However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

![Three items lined up from the right](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/basics6.png)

The live example below has the `direction` property set to `rtl` to force a right-to-left flow for our items. You can remove this, or change the values of `justify-content` to see how flexbox behaves when the start of the inline direction is on the right.

Alignment and flex-direction
----------------------------

The start line will also change if you change the `flex-direction` property — for example using `row-reverse` instead of `row`.

In this next example I have items laid out with `flex-direction: row-reverse` and `justify-content: flex-end`. In a left to right language the items all line up on the left. Try changing `flex-direction: row-reverse` to `flex-direction: row`. You will see that the items now move to the right hand side.

While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. `flex-start` will be where the start of a sentence of text would begin.

![Diagram showing start on the left and end on the right.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align8.png)

You can switch them to display in the block direction for the language of your document by selecting `flex-direction: column`. Then `flex-start` will then be where the top of your first paragraph of text would start.

![Diagram showing start at the top and end at the bottom.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align10.png)

If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. `flex-start` will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

![Diagram showing start on the right and end on the left.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align9.png)

![Diagram showing end at the top and start at the bottom](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align11.png)

Using auto margins for main axis alignment
------------------------------------------

We don't have a `justify-items` or `justify-self` property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a `justify-self` property, however consider the image below. I have three items on one side and two on the other. If I were able to use `justify-self` on item *d*, it would also change the alignment of item *e* that follows, which may or may not be my intention.

![Five items, in two groups. Three on the left and two on the right.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container/align7.png)

Instead we can target item 4 and separate it from the first three items by giving it a `margin-left` value of `auto`. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

In this live example, I have flex items arranged simply into a row with the basic flex values, and the class `push` has `margin-left: auto`. You can try removing this, or adding the class to another item to see how it works.

Future alignment features for Flexbox
-------------------------------------

At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the `space-evenly` value for `align-content` and `justify-content` properties.

The Box Alignment module also includes other methods of creating space between items, such as the `column-gap` and `row-gap` feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use `column-gap` and `row-gap` in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.

My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article Box Alignment in Grid Layout (en-US), and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

See Also
--------

* Box Alignment (en-US)
* Box Alignment in Flexbox (en-US)
* Box Alignment in Grid Layout (en-US)


Conceitos básicos de flexbox - CSS

Conceitos básicos de flexbox
============================

O *Flexible Box Module*, geralmente chamado de *flexbox*, foi projetado tanto como um modelo de *layout* unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do *flexbox*, as quais exploraremos com mais detalhes no restante deste guia.

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com *o layout* em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

Os eixos do *flexbox*
---------------------

Ao se utilizar o *flexbox*, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade `flex-direction` e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

### Eixo principal

Conforme descrito acima, a propriedade `flex-direction` define a direção do eixo principal e pode tem quatro valores possíveis:

* `row`
* `row-reverse`
* `column`
* `column-reverse`

Se o valor escolhido for `row` (linha) ou `row-reverse` (linha reversa), seu eixo principal se moverá ao longo da linha — na **direção inline**.

![If flex-direction is set to row the main axis runs along the row in the inline direction.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics1.png)

Se o valor escolhido for `column` (coluna) ou `column-reverse` (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na **direção block**.

![If flex-direction is set to column the main axis runs in the block direction.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics2.png)

### Eixo transversal

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade `flex-direction` estiver definida nas linhas, como `row` ou `row-reverse`, o eixo transversal estará na direção das colunas, como `column` ou `column-reverse`.

![If flex-direction is set to row then the cross axis runs in the block direction.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics3.png)

Se o eixo principal for definido nas colunas, como `column` ou `column-reverse`, então o eixo transversal estará na direção das linhas, como `row` ou `row-reverse`.

![If flex-direction is set to column then the cross axis runs in the inline direction.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics4.png)

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o *flexbox* possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

Linhas de Início e Fim
----------------------

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

Essa discussão sobre a relação entre o *flexbox* e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos *flex* fluem.

Se o valor da propriedade `flex-direction` for `row (linha)`, considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

![Working in English the start edge is on the left.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics5.png)

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

![The start edge in a RTL language is on the right.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics6.png)

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

Contêiner *Flex*
----------------

A área de um documento que faz uso do *flexbox* é chamada de **contêiner *flex***. Para criar essa estrutura, define-se o valor da propriedade `display` do elemento representado pelo contêiner como `flex` ou `inline-flex`. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo *flex*. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

* Exibição em linha (o padrão do `flex-direction` é `row`).
* Alinhamento na borda inicial do eixo principal.
* Não há expansão no eixo principal, mas pode haver contração.
* Haverá expansão vertical para preencher a altura do eixo transversal.
* A propriedade `flex-basis` (en-US) estará definida como `auto`.
* A propriedade `flex-wrap` estará definida como `nowrap`.

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

### Propriedade *`flex-direction`*

A propriedade `flex-direction` permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade `flex-direction` como `row-reverse` (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.

Se mudarmos a `flex-direction` para a `column` (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para `column-reverse` (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.

No exemplo prático abaixo tem-se a propriedade `flex-direction` definida como `row-reverse`. Experimente os outros valores - `row`, `column` e `column-reverse` - para ver o que acontece com o conteúdo.

Quebra de linha com *"**flex-wrap**"*
-------------------------------------

Embora o *flexbox* seja um modelo unidimensional, é possível fazer com que elementos *flex* sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner *flex*. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade `flex-wrap` com o valor `wrap`. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

O exemplo prático abaixo contém elementos *flex* aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade `flex-wrap` está definida como `wrap`, os itens serão reorganizados em mais de uma linha. Trocando-se para `nowrap`, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do `nowrap` causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (en-US) (em Inglês).

Propriedade abreviada *flex-flow*
---------------------------------

Pode-se combinar as propriedades `flex-direction` e `flex-wrap` de forma abreviada através da propriedade `flex-flow`. O primeiro valor especificado é o `flex-direction` e o segundo valor é o `flex-wrap`.

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade `flex-direction` - `row`, `row-reverse`, `column` ou `column-reverse`, e também altere o segundo para `wrap` e `nowrap`.

Expansão, encolhimento e tamanho dos elementos *flex*
-----------------------------------------------------

Para ter mais controle sobre os elementos *flex* é possível alterá-los diretamente utilizando as três propriedades abaixo:

* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-basis` (en-US)

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugere-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (en-US) (em inglês).

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de **espaço disponível**. Quando se modifica o valor das propriedades acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o *flexbox* posicionará esse espaço após o último item.

![This flex container has available space after laying out the items.](/pt-BR/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/basics7.png)

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

### Propriedade *`flex-basis`*

A propriedade `flex-basis` define o tamanho inicial dos elementos, em unidades de *pixel*, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é `auto` — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade `flex-basis`.

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se `display: flex` no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

### Propriedade *`flex-grow`*

Com a propriedade `flex-grow` definida como um inteiro positivo, os elementos *flex* podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no `flex-basis`. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

Atribuir o valor 1 à propriedade `flex-grow` fará com que o espaço disponível no contêiner *flex* seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

Como visto no parágrafo anterior, a propriedade `flex-grow` pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 e 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

### Propriedade `flex-shrink`

Enquanto a propriedade `flex-grow` permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade `flex-shrink` faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade `flex-shrink` seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade `flex-basis`. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade `flex-shrink` receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

**Nota:** Note que os valores para as propriedades `flex-grow` e `flex-shrink` são proporcionais. Particularmente, se tivermos todos os nossos elementos definidos como flex: `1 1 200px` e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: `2 1 200px`. Entretanto, podemos escrever flex: `10 1 200px` e flex: `20 1 200px` se quisermos.

### Abreviatura para os valores das propriedades flex

As propriedades `flex-grow`, `flex-shrink`, and `flex-basis` raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação `flex`. A abreviatura `flex` permite definir os três valores na seguinte ordem: `flex-grow`, `flex-shrink`, `flex-basis`.

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação `flex`; lembre-se que o primeiro campo corresponde à propriedade `flex-grow`, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade `flex-shrink` e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade `flex-basis`, que define o valor base, em unidades de *pixel*, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

* `flex: initial`
* `flex: auto`
* `flex: none`
* `flex: <positive-number>`

Definir `flex: initial` reseta os elementos para valores-padrão do Flexbox, sendo equivale a `flex: 0 1 auto`. Neste ultimo caso, o valor da propriedade `flex-grow` é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade `flex-basis`. o valor da propriedade `flex-shrink` é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade `flex-basis` é `auto` e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

Definir `flex: auto` é equivalente a `flex: 1 1 auto`. Essa configuração é semelhante a `flex:initial`, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

Definir `flex: none` irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever `flex: 0 0 auto`. O elementos não poderão crescer ou diminuir, mas serão criados usando o *flexbox* com a propriedade `flex-basis` com o valor `auto`.

Outra abreviação normalmente vista em tutoriais é `flex: 1` ou `flex: 2` e assim por diante, o que equipara-se a `flex: 1 1 0`. Os elementos podem crescer ou diminuir a partir da propriedade `flex-basis` com valor nulo.

Teste essas formas abreviadas no exemplo prático abaixo:

Alinhamento, justificação e distribuição de espaço livre entre os elementos
---------------------------------------------------------------------------

Um atributo chave do *flexbox* é a capacidade de alinhar e justificar os elementos *flex* nos eixos principal e transversal e distribuir o espaço entre eles.

### Propriedade `align-items`

A propriedade `align-items` irá alinhar os elementos no eixo transversal.

O valor inicial desta propriedade é `stretch` e é por essa razão que, por padrão, os elementos *flex* se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

Pode-se definir a propriedade `align-items` como `flex-start`, de modo que os elementos fiquem alinhados com topo do contêiner, `flex-end` para alinhá-los a partir da base ou `center`, para que o alinhamento seja centralizado.

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade **align-items**:

* `stretch`
* `flex-start`
* `flex-end`
* `center`

### Propriedade `justify-content`

A propriedade `justify-content` (en-US) é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (`row` ou `column`) é definida a partir da propriedade `flex-direction`. O valor inicial é `flex-start`, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como `flex-end`, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou `center`, para alinhá-los ao centro.

O valor `space-between` pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor `space-around`.

Tente os seguintes valores da propriedada `justify-content` no exemplo prático abaixo:

* `stretch`
* `flex-start`
* `flex-end`
* `center`
* `space-around`
* `space-between`

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

Próximos passos
---------------

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (en-US) (em inglês).


scale() - CSS

scale()
=======

A função CSS **`scale()`** define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/scale/scale.png)

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (*isotrópico*) e a proporção do elemento é preservada (isto é uma transformação homotética).

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

**Nota:** A função `scale()` apenas redimensiona em 2D Para redimensionar em 3D, use `scale3d()` (en-US) ao invés.

Sintaxe
-------

A função `scale()` é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.
```

scale(sx)

scale(sx, sy)
```

### Valores

`sx`

Um `<number>` representando a abscissa do vetor de redimensionamento.

`sy`

Um `<number>` representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão é`sx`, resultando em um redimensionamento uniforme que preserva a proporção do elemento.

| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
|

sx
0

0
sy

 |

sx
 0
0

0
 sy
0

0
0
1

 |

sx
 0
0

0
 sy
0

0
0
1

 |

sx
 0
0
0

0
sy
0
0

0
0
1
0

0
0
0
1

 |
| `[sx 0 0 sy 0 0]` |

Exemplos
--------

### Redimensionando as dimensões X e Y juntas

#### HTML

```html
<div>Normal</div>
<div class="scaled">Redimensionado</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```

#### Resultado

### Redimensionando dimensões X e Y separadamente e transladando a origem

#### HTML

```html
<div>Normal</div>
<div class="scaled">Redimensionado</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /\* Igual a scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}
```

#### Resultado

Compatibilidade com navegadores
-------------------------------

Veja o dado do tipo `<transform-function>` (en-US) para informações de compatibilidade.

Ver também
----------

* `transform`
* `<transform-function>` (en-US)
* `scale3d()` (en-US)


perspective() - CSS

perspective()
=============

A função CSS **`perspective()`** define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo `<transform-function>` (en-US).

Sintaxe
-------

A distância de perspectiva usada por`perspective()` é especificada por um valor `<length>` (en-US), que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.
```

perspective(d)
```

### Valores

*d*

É um `<length>` (en-US) representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.

| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
|
 Essa transformação se aplica ao espaço 3D e não pode ser representada
 no plano.
  |
 Essa não é uma transformação linear em ℝ3, e não pode ser
 representada usando uma matriz de coordenadas cartesianas.
  |

1
 0
0
0

0
 1
0
0

0
0
1
0

0
0

−1
 /d

1

 |

Exemplos
--------

### HTML

```html
<p>Sem perspectiva:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>Com perspectiva (7.5cm):</p>
<div class="perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
```

### CSS

```css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

.no-perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
```

### Resultado

Compatibilidade com navegadores
-------------------------------

Veja o tipo de dado `<transform-function>` (en-US) para informações de compatibilidade.

Ver também
----------

* `transform`
* `<transform-function>` (en-US)


rotate() - CSS

rotate()
========

A função CSS **`rotate()`** define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/rotate/rotate.png)

O eixo de rotação passa por uma origem, definido pela propriedade CSS `transform-origin`.

Sintaxe
-------

A quantidade de rotação criada por `rotate()` é especificado por um `<angle>` (en-US). Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de *point reflection* (reflexão do ponto).
```

rotate(a)
```

### Valores

`a`

É um `<angle>` (en-US) representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.

| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
|

cos(a)
-sin(a)

sin(a)
cos(a)

 |

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 |

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 |

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Exemplos
--------

### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```

### Resultado

Compatibilidade do navegador
----------------------------

Por favor, veja o tipo de dados `<transform-function>` (en-US) para informações de compatibilidade.

Veja também
-----------

* `transform`
* `<transform-function>` (en-US)
* `rotate3d()`


rotate3d() - CSS

rotate3d()
==========

A função CSS **`rotate3d()`** define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo `<transform-function>` (en-US).

No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade `transform-origin`). Se, como especificado, o vetor não for *normalizado* (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o user agent (en-US) irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

**Nota:** Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.

Sintaxe
-------

A quantidade de rotação criada por `rotate3d()` é especificada por três `<number>` e um `<angle>` (en-US). Os `<number>` representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O `<angle>` representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.
```

rotate3d(x, y, z, a)
```

### Valores

`x`

É um `<number>` descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

`y`

É um `<number>` descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

`z`

É um `<number>` descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

`a`

É um `<angle>` (en-US) representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.

|  |  |
| --- | --- |
| Coordenadas cartesianas em ℝ2 |
 Essa transformação se aplica ao plano 3D e não pode ser representada em
 um plano.
  |
| Coordenadas homogêneas em ℝℙ2 |
| Coordenadas cartesianas em ℝ3 |

1
 +(1
 -cos(
 a))(

x
2

-1)

z
·sin(
 a)+
 x
y(1
 -cos(
 a))

-
y
·sin(
 a)
 +
x
z
·(1
 -cos(
 a))

-
z
·sin(
 a)
 +
x
y
·(1
 -cos(
 a))

1+(1-cos(a))(y2-1)

x
·sin(
 a)
 +
y
z
·(1
 -cos(
 a))

ysin(a) + xz(1-cos(a))
-xsin(a)+yz(1-cos(a))
1+(1-cos(a))(z2-1)
t

0
0
0
1

 |
| Coordenadas homogêneas em ℝℙ3 |  |

Exemplos
--------

### Rotacionando no eixo y

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotacionado</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}
```

#### Resultado

### Rotacionando em um eixo customizado

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotacionado</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}
```

#### Resultado

Compatibilidade com navegadores
-------------------------------

Veja o tipo de dado `<transform-function>` (en-US) para informações de compatibilidade.

Ver também
----------

* `transform`
* `<transform-function>` (en-US)


translate() - CSS

translate()
===========

A função CSS **`translate()`** reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/translate/translate.png)

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

Sintaxe
-------

```css
/\* Valores <length-percentage> únicos \*/
transform: translate(200px);
transform: translate(50%);

/\* Valores <length-percentage> duplos \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### Valores

Valores `<length-percentage>` únicos

Este valor é um `<length>` (en-US) ou `<percentage>` (en-US) representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como `0`. Por exemplo, `translate(2)` é equivalente a `translate(2, 0)`. Um valor percentual refere-se à largura da caixa de referência definida pela propriedade `transform-box` (en-US).

Valores `<length-percentage>` duplos

Este valor descreve dois `<length>` (en-US) ou valores `<percentage>` (en-US) representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade `transform-box` (en-US).

| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas emℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
|
 Uma translação não é uma transformação linear em ℝ2 e não
 pode ser representada usando uma matriz de coordenadas cartesianas.
  |

1
 0
tx

0
 1
ty

0
0
1

 |

1
 0
tx

0
 1
ty

0
0
1

 |

1
 0
0
tx

0
 1
0
ty

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 tx ty]` |

### Sintaxe formal
```

translate(`<length-percentage>` (en-US) , `<length-percentage>` (en-US)?)
```

Exemplos
--------

### Usando uma conversão de eixo único

#### HTML

```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(
    10px
  ); /\* Igual a: translateX(10px) ou translate(10px, 0) \*/
  background-color: pink;
}
```

#### Resultado

### Combinando a translação do eixo y e do eixo x

#### HTML

```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

Compatibilidade com navegadores
-------------------------------

Verifique o tipo de dado `<transform-function>` (en-US) para informações de compatibilidade.

Veja também
-----------

* `transform`
* `<transform-function>` (en-US)


Dominando margin collapsing - CSS

Dominando margin collapsing
===========================

As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como **margin collapsing**. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
Margin collapsing ocorre em três casos básicos:

Irmãos adjacentes

As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser limpado devido ao uso de floats em elementos anteriores ). Por exemplo:

```html
<p>A margem inferior deste parágrafo é colapsada...</p>
<p>... com margem superior deste parágrafo.</p>
```

Pai e primeiro/último filho

Se não houver border, padding, parte inline, contexto de formatação de bloco (en-US) criado ou livre para separar o `margin-top` de um bloco do `margin-top` do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, `height`, `min-height`, ou `max-height` (en-US) para separar o `margin-bottom` de um bloco do `margin-bottom` do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.

Blocos vázios

Se não houver border, padding, conteúdo inline, `height`, ou `min-height` para separar um bloco `margin-top` de sua `margin-bottom`, então as margens superior e inferior são colapsadas.

Algumas coisas podem ser observadas:

* Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
* Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
* Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
* Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados.

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

Veja Também
-----------

* CSS Reference


Box model - CSS

Box model
=========

Resumo
------

Em uma página WEB, cada elemento é representado como um *box* retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses *boxes* é o objetivo do mecanismo de renderização.

No CSS, cada um desses *boxes* retangulares é descrita usando o *box model* padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: **margin edge**, **border edge**, **padding edge** e **content edge**.

![CSS Box model](/pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model/boxmodel-(3).png)

A **área de conteúdo** (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do *content edge*; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

Se a propriedade CSS `box-sizing` está configurada como padrão, as propriedades CSS `width`, `min-width` (en-US), `max-width`, `height`, `min-height` e `max-height` (en-US) controlam o tamanho do conteúdo.

A **área de preenchimento** (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do *padding edge,* e suas dimensões são a *largura do padding-box* e a *altura do padding-box.*

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS `padding-top` (en-US), `padding-right` (en-US), `padding-bottom` (en-US), `padding-left` e na forma generalizada `padding`.

A **área de borda** (border area\*\*)\*\* estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do *border edge*, e suas dimensões são a largura e a altura do *border-box.* Esta área depende do tamanho da borda que está definido pela propriedade `border-width` (en-US) ou pela propriedade `border` (en-US).

A **área de margem** (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do *margin edge,* e suas dimensões são a largura e a altura do *margin-box*.

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS `margin-top`, `margin-right` (en-US), `margin-bottom`, `margin-left` (en-US) e na forma generalizada `margin`.

Quando ocorre um colapso de margens (en-US), a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade `line-height` (en-US), mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

Veja também
-----------

* Referência CSS
* Propriedades CSS relacionadas: `box-sizing`, `background-clip`, `height`, `max-height` (en-US), `min-height`, `width`, `max-height` (en-US), `min-height`, `padding`, `padding-top` (en-US), `padding-right` (en-US), `padding-bottom` (en-US), `padding-left`, `border` (en-US), `border-top` (en-US), `border-right` (en-US), `border-bottom` (en-US), `border-left`, `border-width` (en-US), `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width` (en-US), `border-left-width` (en-US), `margin`, `margin-top`, `margin-right` (en-US), `margin-bottom`, `margin-left` (en-US)


Using CSS counters - CSS

Using CSS counters
==================

Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

O valor de um contador é manipulado através da utilização de `counter-reset` (en-US). `counter-increment` (en-US) pode ser exibido em uma página usando o `counter()` ou `counters()` função da propriedade de `conteúdo` (en-US).

Usando contadores
-----------------

Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função `counter()`. O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

```css
body {
  counter-reset: section; /\* Set the section counter to 0 \*/
}
h3::before {
  counter-increment: section; /\* Increment the section counter\*/
  content: "Section" counter(section) ": "; /\* Display the counter \*/
}
```

Exemplo:

```html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
```

Nesting counters
----------------

Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função `counters()`, uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :

```css
ol {
  counter-reset: section; /\* Creates a new instance of the
 section counter with each ol
 element \*/
  list-style-type: none;
}
li::before {
  counter-increment: section; /\* Increments only this instance
 of the section counter \*/
  content: counters(section, ".") " "; /\* Adds the value of all instances
 of the section counter separated
 by a ".". \*/
  /\* if you need to support < IE8 then
 make sure there is no space after
 the ',' \*/
}
```

Combinado com o seguinte HTML:

```html
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>
```

Produz este resultado:

Especificações
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

Veja mais
---------

* counter-reset (en-US)
* counter-increment (en-US)

*There is an additional example available at http://www.mezzoblue.com/archives/20.../counter\_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.*


CSS Animations tips and tricks - CSS

CSS Animations tips and tricks
==============================

Animações CSS tornam possível fazer coisas incríveis com os elementos que compoem seus documentos e aplicativos. No entanto, existem coisas que você pode querer fazer que não são óbvias, ou jeitos espertos de fazer coisas que você pode não ter pensado de imediato. Esse artigo é uma coleção de dicas e truques que descobrimos que podem tornar seu trabalho mais fácil, incluindo como rodar uma animação parada novamente.

Rode uma animação novamente
---------------------------

A especificação Animações CSS (en-US) não oferece um modo de rodar uma animação novamente. Não existe um método mágico `resetAnimation()` nos elementos, e você não pode nem mesmo apenas atribuir o `animation-play-state` (en-US) do elemento para `"running"` de novo. Ao invés disso, você tem que usar macetes para fazer com que uma animação parada reexecute.

Aqui está um modo de fazer o qual achamos estável e confiável o suficiente para sugerir à você.

### Conteúdo HTML

Primeiro, vamos definir o HTML para uma `<div>` que gostaríamos de animar e um botão que vai executar (ou reexecutar) a animação.

```html
<div class="box"></div>

<div class="runButton">Clique em mim para rodar a animação</div>
```

### Conteúdo CSS

Agora vamos definir a animação em sí usando CSS. Algum CSS que não é importante (o estilo do botão "Rodar" em sí) não é mostrado aqui, por brevidade.
```

.runButton {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}
```

```css
@keyframes colorchange {
  0% {
    background: yellow;
  }
  100% {
    background: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}
```

Existem duas classes aqui. A classe "`box`" é a descrição básica da aparência da caixa, sem nenhuma informação de animação inclusa. Os detalhes da animação são incluídos na classe "`changing`", a qual diz que o `@keyframes` (en-US) chamado `"colorchange"` deveria ser usado no decorrer de dois segundos para animar a caixa.

Perceba que por isso a caixa não começa com nenhum efeito de animação configurado, então não será animada.

### Conteúdo JavaScript

A seguir vamos olhar para o JavaScript que faz o trabalho. O macete dessa técnica está na função `play()` , a qual é chamada quando o usuário clica no botão de "rodar".

```js
function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function (time) {
    window.requestAnimationFrame(function (time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
```

Isso parece esquisito, não parece? É porque a única maneira de executar uma animação novamente é removendo o efeito de animação, deixar o documento recomputar os estilos para que ele saiba que você fez isso, e então adicionar o efeito de animação de volta ao elemento. Para fazer isso acontecer temos que ser criativos.

Aqui está o que acontece quando a função `play()` é chamada:

1. The box's list of CSS classes is reset to simply `"box"`. This has the effect of removing any other classes currently applied to the box, including the `"changing"` class that handles animation. In other words, we're removing the animation effect from the box. However, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.
2. To be sure that the styles are recalculated, we use `window.requestAnimationFrame()`, specifying a callback. Our callback gets executed just before the next repaint of the document. The problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet! So...
3. Our callback cleverly calls `requestAnimationFrame()` a second time! This time, the callback is run before the next repaint, which is after the style recomputation has occurred. This callback adds the `"changing"` class back onto the box, so that the repaint will start the animation once again.

Claro, também precisamos adicionar um tratador de evento para o nosso botão de "rodar" para que ele de fato faça algo:

```js
document.querySelector(".runButton").addEventListener("click", play, false);
```

### Resultado

Veja também
-----------

* Animações CSS
* Usando Animações CSS
* `Window.requestAnimationFrame()`