diff --git a/guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md b/guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md index 3bbd707141..0264840e87 100644 --- a/guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md +++ b/guide/english/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md @@ -3,14 +3,42 @@ title: "Use display: flex to Position Two Boxes" --- ## Use display: flex to Position Two Boxes -Flexbox 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 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. +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 + +