chore(i18n,curriculum): update translations (#42629)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
title: Usar os superpoderes do CSS Flexbox no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
@ -9,59 +9,59 @@ dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning.
|
||||
À direita está um tweet que será utilizado como exemplo prático. Alguns dos elementos ficariam melhores com um layout diferente. O último desafio apresentou a propriedade `display: flex`. Neste desafio, você vai adicioná-lo a vários componentes do tweet para começar a ajustar a posição deles.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS:
|
||||
Adicione a propriedade `display: flex` a todos os itens a seguir - note que os seletores já estão definidos no CSS:
|
||||
|
||||
`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`.
|
||||
`header`, `.profile-name`, `.follow-btn`, `h3`, `h4`, `footer` e `.stats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve aparecer renderizado na página. Lembre-se de desativar quaisquer extensões do tipo bloqueadores de anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Your `header` should have a `display` property set to `flex`.
|
||||
O elemento `header` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `footer` should have a `display` property set to `flex`.
|
||||
O elemento `footer` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `h3` should have a `display` property set to `flex`.
|
||||
O elemento `h3` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `h4` should have a `display` property set to `flex`.
|
||||
O elemento `h4` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.profile-name` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.profile-name` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.follow-btn` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.follow-btn` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.stats` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.stats` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
title: Alinhar elementos usando a propriedade align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
@ -9,26 +9,26 @@ dashedName: align-elements-using-the-align-items-property
|
||||
|
||||
# --description--
|
||||
|
||||
The `align-items` property is similar to `justify-content`. Recall that the `justify-content` property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
|
||||
A propriedade `align-items` é similar à `justify-content`. Lembre que a propriedade `justify-content` alinhou os flex items ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e para colunas é uma linha vertical.
|
||||
|
||||
Flex containers also have a **cross axis** which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
|
||||
Flex containers também têm um **eixo transversal** que é o oposto do eixo principal. Para linhas, o eixo transversal é vertical, e para colunas, o eixo transversal é horizontal.
|
||||
|
||||
CSS offers the `align-items` property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
|
||||
O CSS oferece a propriedade `align-items` para alinhar os flex items ao longo do eixo transversal. Para linhas, ela indica ao CSS como empurrar os itens para cima ou para baixo dentro do container. E para uma coluna, como empurrar todos os itens para a esquerda ou direita dentro do container.
|
||||
|
||||
The different values available for `align-items` include:
|
||||
Os valores disponíveis para `align-items` são:
|
||||
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no <code>align-items</code> value is specified.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do container. Para linhas, os flex items são posicionados no topo do container. Para colunas, os flex items são posicionados à esquerda do container.</li><li><code>flex-end</code>: alinha os itens no final do container. Para linhas, todos os flex items são posicionados na parte inferior do container. Para colunas, os flex items são posicionados à direita do container.</li><li><code>center</code>: alinha os itens ao centro. Para linhas, os flex items são posicionados verticalmente (com espaços iguais acima e abaixo dos itens). Para colunas, os flex items são posicionados horizontalmente (com espaços iguais à esquerda e à direita dos itens).</li><li><code>stretch</code>: estica os itens para preencher o container. Por exemplo, itens posicionados em linhas são esticados para preencher o contêiner de cima a baixo. Este é o valor padrão se nenhum valor for especificado para a propriedade <code>align-items</code>.</li><li><code>baseline</code>: o posicionamento é realizado com base no texto dentro de cada flex item. A linha de base (baseline) é um conceito de textos. Pense nela como se fosse a linha em que as letras ficam apoiadas.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
An example helps show this property in action. Add the CSS property `align-items` to the `#box-container` element, and give it a value of `center`.
|
||||
Alguns exemplos vão te ajudar a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `align-items` ao elemento `#box-container` e dê a ela o valor de `center`.
|
||||
|
||||
**Bonus**
|
||||
Try the other options for the `align-items` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
|
||||
**Bônus**
|
||||
Use os demais valores da propriedade `align-items` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have an `align-items` property set to a value of `center`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `align-items` definida com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
title: Alinhar elementos usando a propriedade justify-content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
@ -9,26 +9,26 @@ dashedName: align-elements-using-the-justify-content-property
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the `justify-content` property has several options to do this. But first, there is some important terminology to understand before reviewing those options.
|
||||
Às vezes, os flex items dentro de um flex container não preenchem todo o espaço no disponível no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os flex items de uma certa maneira. Felizmente, a propriedade `justify-content` tem várias opções para fazer isso. Antes, no entanto, há uma terminologia importante para entender antes de aprender essas opções.
|
||||
|
||||
[Here is a useful image showing a row to illustrate the concepts below.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
[Aqui está uma imagem mostrando uma linha para ilustrar os conceitos abaixo.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the **main axis**. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.
|
||||
Lembre-se de que definir um flex container como uma linha coloca os flex items lado a lado da esquerda para a direita. Já um flex container como uma coluna coloca os flex items em uma pilha vertical de cima para baixo. Seja qual for a direção do flex container, a direção em que os flex items são posicionados é chamada de **eixo principal**. Para uma linha, o eixo principal é uma linha horizontal que passa através de cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através de cada item.
|
||||
|
||||
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
|
||||
Existem várias opções para espaçar os flex items ao longo da linha que for o eixo principal. Uma dos mais usadas é `justify-content: center;`, que alinha todos os flex items ao centro dentro do flex container. As demais opções são:
|
||||
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para <code>justify-content</code>.</li><li><code>flex-end</code>: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.</li><li><code>space-between</code>: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.</li><li><code>space-around</code>: similar ao <code>space-between</code> mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.</li><li><code>space-evenly</code>: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
An example helps show this property in action. Add the CSS property `justify-content` to the `#box-container` element, and give it a value of `center`.
|
||||
Alguns exemplos vão ajudar você a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `justify-content` ao elemento `#box-container` e dê a ela o valor de `center`.
|
||||
|
||||
**Bonus**
|
||||
Try the other options for the `justify-content` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
|
||||
**Bônus**
|
||||
Use os demais valores da propriedade `justify-content` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `justify-content` property set to a value of `center`.
|
||||
O elemento `#box-container` deve ter a propriedade `justify-content` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
title: Usar a propriedade flex-direction para criar uma coluna no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
@ -9,21 +9,21 @@ dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-em
|
||||
|
||||
# --description--
|
||||
|
||||
The tweet embed `header` and `footer` used the `flex-direction` property earlier with a row value. Similarly, the items inside the `.profile-name` element would work well stacked as a column.
|
||||
Anteriormente, os elementos `header` e `footer` do tweet usaram a propriedade `flex-direction` para posicionar os flex items horizontalmente. Da mesma forma, os itens dentro do elemento de classe `.profile-name` funcionariam bem empilhados como uma coluna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`.
|
||||
Adicione a propriedade `flex-direction` com o valor de `column` no elemento de classe `.profile-name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.profile-name` element should have a `flex-direction` property set to `column`.
|
||||
O elemento de classe `.profile-name` deve possuir a propriedade `flex-direction` com o valor de `column`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
title: Usar a propriedade flex-direction para criar linhas no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
@ -9,27 +9,27 @@ dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally.
|
||||
Os elementos `header` e `footer` no exemplo do tweet possuem itens filhos que podem ser posicionados em linhas usando a propriedade `flex-direction`. Você vai usar essa propriedade para dizer ao CSS para alinhar os flex items horizontalmente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`.
|
||||
Adicione a propriedade `flex-direction` com o valor de `row` em ambos os elementos `header` e `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `header` should have a `flex-direction` property set to `row`.
|
||||
O elemento `header` deve possuir a propriedade `flex-direction` com o valor de `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
The `footer` should have a `flex-direction` property set to `row`.
|
||||
O elemento `footer` deve possuir a propriedade `flex-direction` com o valor de `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display: flex to Position Two Boxes'
|
||||
title: 'Usar display: flex para posicionar duas caixas'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
@ -9,17 +9,17 @@ dashedName: use-display-flex-to-position-two-boxes
|
||||
|
||||
# --description--
|
||||
|
||||
This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
|
||||
Esta seção utiliza estilos de desafio alternados para mostrar como usar o CSS para posicionar elementos de maneira flexível. Primeiro, o desafio explicará a teoria. Em seguida, aplicaremos o conceito aprendido em um desafio prático usando um tweet simples.
|
||||
|
||||
Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page.
|
||||
Colocando a propriedade `display: flex;` em um elemento permite que você use outras propriedades flex para construir uma página responsiva.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `display` to `#box-container` and set its value to `flex`.
|
||||
Adicione a propriedade CSS `display` ao `#box-container` e dê a ele o valor `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` should have the `display` property set to a value of `flex`.
|
||||
`#box-container` deve ter a propriedade `display` com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
title: Usar a propriedade align-items no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge introduced the `align-items` property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.
|
||||
O último desafio apresentou a propriedade `align-items` oferecendo um exemplo. Esta propriedade pode ser aplicada a alguns elementos do tweet para alinhar os flex items dentro deles.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `align-items` to the header's `.follow-btn` element. Set the value to `center`.
|
||||
Adicione a propriedade CSS `align-items` ao elemento `.follow-btn` que se encontra dentro do header. Defina o valor dessa propriedade para `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.follow-btn` element should have the `align-items` property set to a value of `center`.
|
||||
O elemento de classe `.follow-btn` deve ter a propriedade `align-items` definida com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
title: Usar a propriedade align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
@ -9,23 +9,23 @@ dashedName: use-the-align-self-property
|
||||
|
||||
# --description--
|
||||
|
||||
The final property for flex items is `align-self`. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties `float`, `clear`, and `vertical-align` do not work on flex items.
|
||||
A última propriedade relacionada aos flex items é `align-self`. Esta propriedade permite que você ajuste o alinhamento de cada item individualmente, ao invés de configurar todos de uma vez. Isso acaba sendo útil, uma vez que outras técnicas comuns de ajuste utilizando as propriedades CSS `float`, `clear` e `vertical-align` não funcionam em flex items.
|
||||
|
||||
`align-self` accepts the same values as `align-items` and will override any value set by the `align-items` property.
|
||||
`align-self` aceita os mesmos valores que `align-items`, com a diferença que vai substituir qualquer valor anteriormente definido pela propriedade `align-items`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a value of `center` and give `#box-2` a value of `flex-end`.
|
||||
Adicione a propriedade CSS `align-self` aos elementos com id de `#box-1` e `#box-2`. Dê para `#box-1` o valor de `center` e para `#box-2` o valor de `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `align-self` property set to a value of `center`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `align-self` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `align-self` property set to a value of `flex-end`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `align-self` com o valor de `flex-end`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
title: Usar a propriedade flex-basis para definir o tamanho inicial de um flex item
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
@ -9,35 +9,35 @@ dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex-basis` property specifies the initial size of the item before CSS makes adjustments with `flex-shrink` or `flex-grow`.
|
||||
A propriedade `flex-basis` especifica o tamanho inicial do item antes do CSS fazer ajustes com `flex-shrink` ou `flex-grow`.
|
||||
|
||||
The units used by the `flex-basis` property are the same as other size properties (`px`, `em`, `%`, etc.). The value `auto` sizes items based on the content.
|
||||
As unidades utilizadas pela propriedade `flex-basis` são as mesmas que outras propriedades de tamanho (`px`, `em`, `%`, etc.). O valor `auto` dimensiona os flex items baseado no conteúdo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex-basis` to both `#box-1` and `#box-2`. Give `#box-1` a value of `10em` and `#box-2` a value of `20em`.
|
||||
Defina o tamanho inicial das caixas usando `flex-basis`. Adicione a propriedade CSS `flex-basis` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor de `10em` e `#box-2` o valor de `20em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `flex-basis` property.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
The `#box-1` element should have a `flex-basis` value of `10em`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-basis` com o valor de `10em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `flex-basis` property.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
The `#box-2` element should have a `flex-basis` value of `20em`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-basis` com o valor de `20em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
title: Usar a propriedade flex-direction para criar uma coluna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
@ -9,15 +9,15 @@ dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
|
||||
# --description--
|
||||
|
||||
The last two challenges used the `flex-direction` property set to `row`. This property can also create a column by vertically stacking the children of a flex container.
|
||||
Os últimos dois desafios usaram a propriedade `flex-direction` com o valor de `row`. Esta propriedade também pode criar uma coluna ao empilhar verticalmente os elementos filhos de um flex container.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column`.
|
||||
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to `column`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `column`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
title: Usar a propriedade flex-direction para criar uma linha
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
@ -9,19 +9,19 @@ dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
|
||||
# --description--
|
||||
|
||||
Adding `display: flex` to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the `flex-direction` property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
|
||||
Ao adicionar `display: flex` a um elemento, você o transforma em um flex container. Isso faz com que seja possível alinhar todos os filhos desse elemento em linhas ou colunas. Para fazer isso, você deve usar a propriedade `flex-direction` no item pai e definir o valor desta usando row ou column. Criar uma row (linha) vai alinhar os itens filhos horizontalmente. Criar uma column (coluna) vai alinhar os itens filhos verticalmente.
|
||||
|
||||
Other options for `flex-direction` are `row-reverse` and `column-reverse`.
|
||||
Outras opções para `flex-direction` são `row-reverse` e `column-reverse`.
|
||||
|
||||
**Note:** The default value for the `flex-direction` property is `row`.
|
||||
**Observação:** o valor padrão da propriedade `flex-direction` é `row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `row-reverse`.
|
||||
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `row-reverse`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `row-reverse`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Use the flex-grow Property to Expand Items
|
||||
title: Usar a propriedade flex-grow para expandir flex items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 301111
|
||||
@ -9,23 +9,23 @@ dashedName: use-the-flex-grow-property-to-expand-items
|
||||
|
||||
# --description--
|
||||
|
||||
The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shrink` controls the size of the items when the container shrinks. The `flex-grow` property controls the size of items when the parent container expands.
|
||||
O oposto de `flex-shrink` é a propriedade `flex-grow`. Lembre-se de que `flex-shrink` controla o tamanho dos itens quando o contêiner encolhe. A propriedade `flex-grow` controla o tamanho dos itens quando o contêiner pai expande.
|
||||
|
||||
Using a similar example from the last challenge, if one item has a `flex-grow` value of `1` and the other has a `flex-grow` value of `3`, the one with the value of `3` will grow three times as much as the other.
|
||||
Usando um exemplo semelhante ao do último desafio, se um item tem um `flex-grow` com o valor de `1` e o outro tem um `flex-grow` com o valor de `3`, aquele com o valor de `3` crescerá três vezes mais do que o outro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-grow` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
|
||||
Adicione a propriedade CSS `flex-grow` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor `1` e `#box-2` o valor `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `flex-grow` property set to a value of `1`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-grow` com o valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `flex-grow` property set to a value of `2`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-grow` com o valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Use the flex Shorthand Property
|
||||
title: Usar a propriedade abreviada flex
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-flex-shorthand-property
|
||||
|
||||
# --description--
|
||||
|
||||
There is a shortcut available to set several flex properties at once. The `flex-grow`, `flex-shrink`, and `flex-basis` properties can all be set together by using the `flex` property.
|
||||
Há um atalho disponível para definir várias propriedades flex de uma só vez. As propriedades `flex-grow`, `flex-shrink` e `flex-basis` podem ser definidas em uma única linha usando a propriedade `flex`.
|
||||
|
||||
For example, `flex: 1 0 10px;` will set the item to `flex-grow: 1;`, `flex-shrink: 0;`, and `flex-basis: 10px;`.
|
||||
Por exemplo, `flex: 1 0 10px;` vai definir o item como `flex-grow: 1;`, `flex-shrink: 0;` e `flex-basis: 10px;`.
|
||||
|
||||
The default property settings are `flex: 0 1 auto;`.
|
||||
A configuração padrão dessa propriedade é `flex: 0 1 auto;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex` to both `#box-1` and `#box-2`. Give `#box-1` the values so its `flex-grow` is `2`, its `flex-shrink` is `2`, and its `flex-basis` is `150px`. Give `#box-2` the values so its `flex-grow` is `1`, its `flex-shrink` is `1`, and its `flex-basis` is `150px`.
|
||||
Adicione a propriedade CSS `flex` aos elementos de id `#box-1` e `#box-2`. Dê a `#box-1` os valores para que seu `flex-grow` seja `2`, `flex-shrink` seja `2` e `flex-basis` seja `150px`. Dê a `#box-2` os valores para que seu `flex-grow` seja `1`, seu `flex-shrink` seja `1` e seu `flex-basis` seja `150px`.
|
||||
|
||||
These values will cause `#box-1` to grow to fill the extra space at twice the rate of `#box-2` when the container is greater than 300px and shrink at twice the rate of `#box-2` when the container is less than 300px. 300px is the combined size of the `flex-basis` values of the two boxes.
|
||||
Estes valores farão com que `#box-1` cresça, preenchendo duas vezes mais o espaço adicional do que `#box-2`, quando o contêiner for maior que 300px, e reduzindo-o duas vezes mais do que `#box-2`, quando o contêiner for menor que 300px. 300px é o tamanho total quando somamos os valores de `flex-basis` de ambas as caixas.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `flex` property set to a value of `2 2 150px`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex` com o valor de `2 2 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `flex` property set to a value of `1 1 150px`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex` com o valor de `1 1 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `flex` property for `#box-1` and `#box-2`.
|
||||
O código deve usar a propriedade `flex` nos elementos de id `#box-1` e `#box-2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Use the flex-shrink Property to Shrink Items
|
||||
title: Usar a propriedade flex-shrink para encolher itens
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
@ -9,25 +9,25 @@ dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
|
||||
# --description--
|
||||
|
||||
So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.
|
||||
Até aqui, todas as propriedades nos desafios se aplicam ao flex container (o pai dos flex items). Porém, há várias propriedades úteis para os flex items.
|
||||
|
||||
The first is the `flex-shrink` property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
|
||||
A primeira é a propriedade `flex-shrink`. Quando é usada, permite que um item encolha se o flex container for muito pequeno. Os itens encolhem quando a largura do contêiner pai é menor do que a soma das larguras de todos os flex items dentro dele.
|
||||
|
||||
The `flex-shrink` property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a `flex-shrink` value of `1` and the other has a `flex-shrink` value of `3`, the one with the value of `3` will shrink three times as much as the other.
|
||||
A propriedade `flex-shrink` recebe números como valor. Quanto maior o número, mais encolherá comparado a outros itens no contêiner. Por exemplo, se um item tem `flex-shrink` de valor `1` e o outro tem `flex-shrink` de valor `3`, aquele com valor `3` vai encolher três vezes mais do que o outro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
|
||||
Adicione a propriedade CSS `flex-shrink` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor `1` e `#box-2` o valor `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `flex-shrink` property set to a value of `1`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-shrink` com o valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `flex-shrink` property set to a value of `2`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-shrink` com o valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Use the flex-wrap Property to Wrap a Row or Column
|
||||
title: Usar a propriedade flex-wrap para quebrar uma linha ou coluna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
|
||||
O CSS flexbox possui uma propriedade que permite dividir um flex container em várias linhas (ou colunas). Por padrão, um flex container manterá todos os flex items juntos. Por exemplo, todos os flex items estarão lado a lado na mesma linha.
|
||||
|
||||
However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
|
||||
No entanto, ao usar a propriedade `flex-wrap`, informamos ao CSS para quebrar essa linha. Isso significa que os itens adicionais serão movidos para uma nova linha ou coluna. O ponto onde essa quebra acontece depende do tamanho dos itens e do tamanho do flex conteiner.
|
||||
|
||||
CSS also has options for the direction of the wrap:
|
||||
O CSS oferece as seguintes opções para a direção da quebra de linha:
|
||||
|
||||
<ul><li><code>nowrap</code>: this is the default setting, and does not wrap items.</li><li><code>wrap</code>: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.</li><li><code>wrap-reverse</code>: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.</li></ul>
|
||||
<ul><li><code>nowrap</code>: esta é a configuração padrão e não cria novas linhas ou colunas.</li><li><code>wrap</code>: cria novas linhas de cima para baixo se os itens estiverem dispostos em linhas e da esquerda para a direita se estiverem em colunas.</li><li><code>wrap-reverse</code>: cria novas linhas de baixo para cima se os itens estiverem dispostos em linhas e da direita para a esquerda se estiverem em colunas.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
The current layout has too many boxes for one row. Add the CSS property `flex-wrap` to the `#box-container` element, and give it a value of `wrap`.
|
||||
O layout atual possui itens demais para caber em apenas uma linha. Adicione a propriedade CSS `flex-wrap` com o valor de `wrap` ao elemento de id `#box-container`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `flex-wrap` com o valor de `wrap`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Use the justify-content Property in the Tweet Embed
|
||||
title: Usar a propriedade justify-content no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed an example of the `justify-content` property. For the tweet embed, this property can be applied to align the items in the `.profile-name` element.
|
||||
O último desafio mostrou um exemplo da propriedade `justify-content`. No tweet, essa propriedade pode ser utilizada para se alinhar os itens dentro do elemento de classe `.profile-name`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `justify-content` to the header's `.profile-name` element and set the value to any of the options from the last challenge.
|
||||
No elemento de classe `.profile-name` adicione a propriedade CSS `justify-content` e defina seu valor para qualquer uma das opções do último desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve aparecer na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`.
|
||||
O elemento de classe `.profile-name` deve ter a propriedade `justify-content` com alguns desses valores: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, ou `space-evenly`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Use the order Property to Rearrange Items
|
||||
title: Usar a propriedade order para reorganizar os itens
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-order-property-to-rearrange-items
|
||||
|
||||
# --description--
|
||||
|
||||
The `order` property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.
|
||||
A propriedade `order` é usada para informar ao CSS a ordem de aparição dos flex items dentro do flex container. Por padrão, os itens aparecerão na mesma ordem em que foram escritos no HTML. A propriedade aceita números como valor. Números negativos podem ser usados.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a value of `2` and give `#box-2` a value of `1`.
|
||||
Adicione a propriedade CSS `order` aos elementos de id `#box-1` e `#box-2`. Dê a `#box-1` um valor de `2` e dê a `#box-2` um valor de `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `order` property set to a value of `2`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `order` com o valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `order` property set to a value of `1`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `order` com o valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
|
||||
Reference in New Issue
Block a user