2.7 KiB
2.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512afa | Use the flex-wrap Property to Wrap a Row or Column | 0 | Use a propriedade flex-wrap para agrupar uma linha ou coluna |
Description
row
(linha) estará toda em uma linha.
No entanto, usando a propriedade flex-wrap
, faz com que o CSS agrupe os itens. Isso significa que itens extras são movidos para uma nova linha ou coluna. O ponto onde haverá a quebra depende do tamanho dos itens e do tamanho do contêiner.
CSS também tem opções para a direção do agrupamento: -
nowrap
: esta é a configuração padrão e não agrupa os itens. -
wrap
: agrupa os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna. -
wrap-reverse
: agrupa os itens de baixo para cima, se estiverem em uma linha, ou da direita para a esquerda, se estiverem em uma coluna.
Instructions
flex-wrap
ao elemento #box-container
e atribua a ela um valor de wrap
. Tests
tests:
- text: 'O elemento <code>#box-container</code> deve ter a propriedade <code>flex-wrap</code> definida como um valor de wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
Challenge Seed
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
Solution
// solution required