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

* Update index.md

* Update index.md
This commit is contained in:
The Coding Aviator
2019-03-09 20:14:44 +05:30
committed by Randell Dawson
parent 5bc2ceac97
commit 193e708165

View File

@ -3,14 +3,42 @@ title: "Use display: flex to Position Two Boxes"
--- ---
## 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 { #main-container {
display: flex; 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>
```