37 lines
1.0 KiB
Markdown
37 lines
1.0 KiB
Markdown
|
---
|
||
|
|
title: Flexbox Direction
|
||
|
|
---
|
||
|
|
## Flexbox Direction
|
||
|
|
Now that you know what flexbox is, it's time to move on to how you can arrange content within a flex container. You can set this via <i>flex-direction</i>
|
||
|
|
|
||
|
|
There are 4 ways to set the flex direction
|
||
|
|
|
||
|
|
1. Row
|
||
|
|
|
||
|
|
<img src = "https://css-tricks.com/wp-content/uploads/2013/04/flex-direction2.svg">
|
||
|
|
|
||
|
|
The flex direction is set to row by default. This arranges all your content in a single row <b>without margins<b>.
|
||
|
|
|
||
|
|
2. Row-reverse
|
||
|
|
|
||
|
|
<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681588.png">
|
||
|
|
|
||
|
|
This reverses your content in the opposite direction. Originally it was going from left to right, now it's going right to left.
|
||
|
|
|
||
|
|
3. column
|
||
|
|
|
||
|
|
<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681589.png">
|
||
|
|
|
||
|
|
This arranges your content in a single column from top to bottom.
|
||
|
|
|
||
|
|
4. column-reverse
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
This arranges your content in a single column from bottom to top.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
<!-- Please add any articles you think might be helpful to read before writing the article -->
|