2018-09-30 22:01:58 +00:00
---
id: 587d78ac367417b2b2512af4
title: Use the flex-direction Property to Make a Column
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
2019-08-05 16:17:33 +00:00
forumTopicId: 301109
2021-01-13 02:31:00 +00:00
dashedName: use-the-flex-direction-property-to-make-a-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
2020-11-27 18:02:05 +00:00
The last two challenges used the `flex-direction` property set to `row` . This property can also create a column by vertically stacking the children of a flex container.
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
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2021-02-01 19:56:07 +00:00
The `#box-container` element should have a `flex-direction` property set to `column` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('#box-container').css('flex-direction') == 'column');
```
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 {
display: flex;
height: 500px;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
#box -1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box -2 {
background-color: orangered;
width: 50%;
height: 50%;
}
< / style >
< div id = "box-container" >
< div id = "box-1" > < / div >
< div id = "box-2" > < / 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 {
display: flex;
height: 500px;
flex-direction: column;
}
#box -1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box -2 {
background-color: orangered;
width: 50%;
height: 50%;
}
< / style >
< div id = "box-container" >
< div id = "box-1" > < / div >
< div id = "box-2" > < / div >
< / div >
2018-09-30 22:01:58 +00:00
```