2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
id: 587d78ad367417b2b2512afa
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 使用 flex-wrap 属性包裹一行或一列
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 0
|
2020-02-11 13:32:25 +00:00
|
|
|
|
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
|
|
|
|
forumTopicId: 301114
|
2021-01-13 02:31:00 +00:00
|
|
|
|
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
|
CSS flexbox 有一个把 flex 子元素拆分为多行(或多列)的特性。 默认情况下,flex 容器会调整项目大小,把它们都塞到一起。 对于行来说,所有项目都会在一条直线上。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
|
不过,使用 `flex-wrap` 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
换行方向的可选值有这些:
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
<ul><li><code>nowrap</code>:默认值,不换行。</li><li><code>wrap</code>:行从上到下排,列从左到右排。</li><li><code>wrap-reverse</code>:行从下到上排,列从右到左排。</li></ul>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
|
现在的布局中,一行里面的元素太多了。 请为 `#box-container` 元素添加 CSS 属性 `flex-wrap`,把将其属性值设为 `wrap`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`#box-container` 元素应具有 `flex-wrap` 属性,其属性值应为 `wrap`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert($('#box-container').css('flex-wrap') == 'wrap');
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
|
# --seed--
|
|
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<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>
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
2020-02-11 13:32:25 +00:00
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
|
```html
|
|
|
|
|
<style>
|
|
|
|
|
#box-container {
|
|
|
|
|
background: gray;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
#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>
|
|
|
|
|
```
|