3.5 KiB
3.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512afa | Use the flex-wrap Property to Wrap a Row or Column | 0 | Используйте свойство flex-wrap для обертывания строки или столбца |
Description
flex-wrap
, он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: -
nowrap
: это значение по умолчанию и не переносит элементы. -
wrap
: обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. -
wrap-reverse
: обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце.
Instructions
flex-wrap
в элемент #box-container
и придайте ему значение wrap. Tests
tests:
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-wrap</code> установленное на значение 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