1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
22 lines
920 B
Markdown
22 lines
920 B
Markdown
---
|
|
title: Use the flex-direction Property to Make a Row
|
|
---
|
|
# Use the flex-direction Property to Make a Row
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
Once you have a flex container by adding <i>display: flex;</i> to the parent container, you can specify if you want the children to be stacked in a row by adding the following:
|
|
```css
|
|
#box-container {
|
|
display: flex; /* This makes the flex container */
|
|
height: 500px;
|
|
flex-direction: row-reverse; /* This makes the direction be a row with reversed elements */
|
|
}
|
|
```
|
|
You will notice how the colors switch positions as the default direction of flex containers are rows as you might have noticed from the <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md' target='_blank' rel='nofollow'>tweet example</a>.
|
|
</details>
|