2018-09-30 22:01:58 +00:00
---
id: 587d78ab367417b2b2512af0
title: 'Use display: flex to Position Two Boxes'
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
2019-08-05 16:17:33 +00:00
forumTopicId: 301105
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
This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
2020-11-27 18:02:05 +00:00
Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page.
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 `display` to `#box-container` and set its value to `flex` .
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
`#box-container` should have the `display` property set to a value of `flex` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('#box-container').css('display') == 'flex');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
#box -container {
height: 500px;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
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 {
height: 500px;
display: flex;
}
#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
```