2.4 KiB
2.4 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