DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
82e44dbf046883d750d8de58a1c2f10a0e2bc180
yoga/docs/_docs/flexbox/flex-direction.md
Yury Zholobov d8341ca3b0 Fix horizontally to vertically in FlexDirection=Column doc 
Summary: Closes https://github.com/facebook/yoga/pull/663

Differential Revision: D6407915

Pulled By: emilsjolander

fbshipit-source-id: 03e2896b9b98cf476a92e7c87fd8dc3f7cef9047
2017-11-24 06:26:37 -08:00

2.7 KiB
Raw Blame History

docid, title, layout, permalink
docid title layout permalink
flex-direction Flex direction docs /docs/flex-direction/

The FlexDirection property controls the direction in which children are laid out. There are 4 options, of which 2 are commonly used:

  • Column (default)
  • Row
  • ColumnReverse
  • RowReverse

The Column option stacks children vertically from top to bottom, and the Row option stacks children from left to right. The Reverse variants of the options reverse the order. If your layout supports right-to-left direction, Yoga will automatically toggle between Row and RowReverse as necessary.

FlexDirection introduces another important aspect of Flexbox, the main and cross axes. This is important as other properties will reference which axis they operate on. Simply put, the main axis follows the FlexDirection and the cross axis crosses the main axis at a 90 degree angle.

FlexDirection = Row

In this example the main axis goes from the left to the right. The cross axis goes from the top to the bottom.

FlexDirection = Column

In this example the main axis goes from the top to the bottom. The cross axis goes from the left to the right.