greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added solution to Use display: flex to Position Two Boxes (#34520) 

* Update index.md

* Update index.md
pull/35320/head
The Coding Aviator 2019-03-09 20:14:44 +05:30 committed by Randell Dawson
parent 5bc2ceac97
commit 193e708165
1 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md
View File

@ -3,14 +3,42 @@ title: "Use display: flex to Position Two Boxes"
---
## Use display: flex to Position Two Boxes
<a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout/flexbox/index.md' target='_blank' rel='nofollow'>Flexbox</a> is a way to structure content in CSS3 which allows you to create responsie websites.
[Flexbox](https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout/flexbox/index.md) is a way to structure content in CSS3 which allows you to create responsie websites.
This challenge is to set the first out of three steps when using Flexbox. You need to make the parent container a flex one by adding <i>display:flex;</i> to its CSS section. The CSS style can target a specific ID or HTML tag, or be aplied to multiple containers using a class. The parent container can be any container-type element, such as a div, section, header, footer, etc.
This challenge is to set the first out of three steps when using Flexbox. You need to make the parent container a flex one by adding *display:flex;* to its CSS section. The CSS style can target a specific ID or HTML tag, or be aplied to multiple containers using a class. The parent container can be any container-type element, such as a div, section, header, footer, etc.
Example:
Syntax:
```CSS
```css
#main-container {
display: flex;
}
```
### Solution
```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>
```