2018-09-30 22:01:58 +00:00
---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
2019-08-05 16:17:33 +00:00
forumTopicId: 301114
2021-01-13 02:31:00 +00:00
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
2020-11-27 18:02:05 +00:00
However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
2018-09-30 22:01:58 +00:00
CSS also has options for the direction of the wrap:
2020-11-27 18:02:05 +00:00
2021-02-03 19:01:43 +00:00
< ul > < li > < code > nowrap< / code > : this is the default setting, and does not wrap items.< / li > < li > < code > wrap< / code > : wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.< / li > < li > < code > wrap-reverse< / code > : wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.< / li > < / ul >
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The current layout has too many boxes for one row. Add the CSS property `flex-wrap` to the `#box-container` element, and give it a value of `wrap` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The `#box-container` element should have the `flex-wrap` property set to a value of `wrap` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('#box-container').css('flex-wrap') == 'wrap');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
#box -container {
background: gray;
display: flex;
height: 100%;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
#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-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-20 16:45:18 +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 >
2018-09-30 22:01:58 +00:00
```