3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ae367417b2b2512afe | Use the flex Shorthand Property | 0 | Use a propriedade flexível de taquigrafia |
Description
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
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
tests:
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>flex</code> 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 <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>flex</code> 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 <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
- text: 'Seu código deve usar a propriedade <code>flex</code> para <code>#box-1</code> e <code>#box-2</code> .'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
Challenge Seed
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Solution
// solution required