---
id: 587d78ae367417b2b2512afe
title: Use the flex Shorthand Property
challengeType: 0
videoUrl: ''
localeTitle: Use a propriedade flexível de taquigrafia
---
## Description
Existe um atalho disponível para definir várias propriedades flexíveis de uma só vez. As propriedades flex-grow
, flex-shrink
e flex-basis
podem ser todas juntas usando a propriedade flex
. Por exemplo, flex: 1 0 10px;
irá definir o item para flex-grow: 1;
flex-shrink: 0;
e flex-basis: 10px;
. As configurações de propriedade padrão são flex: 0 1 auto;
.
## Instructions
Adicione o flex
propriedade CSS a ambos #box-1
e #box-2
. Dê #box-1
os valores para que seu flex-grow
seja 2, sua flex-shrink
seja 2 e sua flex-basis
seja 150px. Dê #box-2
os valores para que seu flex-grow
seja 1, sua flex-shrink
seja 1 e sua flex-basis
seja 150px. Esses valores farão com que #box-1
cresça para preencher o espaço extra com o dobro da taxa de #box-2
quando o container for maior que 300px e encolherá com o dobro da taxa de #box-2
quando o container for menor que 300px. 300px é o tamanho combinado dos valores de flex-basis
das duas caixas.
## Tests
```yml
tests:
- text: 'O elemento #box-1
deve ter a propriedade flex
definida como um valor de 2 2 150px.'
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The #box-1
element should have the flex
property set to a value of 2 2 150px.");'
- text: 'O elemento #box-2
deve ter a propriedade flex
definida como um valor de 1 1 150px.'
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The #box-2
element should have the flex
property set to a value of 1 1 150px.");'
- text: 'Seu código deve usar a propriedade flex
para #box-1
e #box-2
.'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the flex
property for #box-1
and #box-2
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```