2.4 KiB
2.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512afb | Use the flex-shrink Property to Shrink Items | 0 | Use a propriedade flex-shrink para reduzir os itens |
Description
flex-shrink
. Quando usado, permite que um item encolha se o contêiner flexível for muito pequeno. Os itens diminuem quando a largura do contêiner pai é menor que as larguras combinadas de todos os itens flexíveis dentro dele.
A propriedade flex-shrink
recebe números como valores. Quanto maior o número, mais ele será reduzido em comparação com os outros itens no contêiner. Por exemplo, se um item tiver um valor flex-shrink
de 1 e o outro tiver um valor flex-shrink
de 3, aquele com o valor de 3 diminuirá três vezes mais do que o outro. Instructions
flex-shrink
a ambos #box-1
e #box-2
. Dê a #box-1
um valor de 1 e a #box-2
um valor de 2. Tests
tests:
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>flex-shrink</code> definida com um valor de 1.'
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>flex-shrink</code> definida com um valor de 2.'
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
Challenge Seed
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 100%;
height: 200px;
}
#box-2 {
background-color: orangered;
width: 100%;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Solution
// solution required