DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
main
yoga/website/docs/styling/index.md
Nick Gerleman 206b95aba5 Yoga Docs: Rename website-next to website (#1613) 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1613

So that GitHub links to edit a page point to the right place.

This will fail in OSS build until I switch the directory used by Vercel instance, but I am waiting to do that until ready to land, since that would cause other in progress changes to fail when exported.

Reviewed By: joevilches

Differential Revision: D54837857

fbshipit-source-id: 9bec90232dbe3ec8638568685671185d597fcf2d
2024-03-13 17:25:39 -07:00

2.0 KiB
Raw Permalink Blame History

sidebar_position
sidebar_position
2

Styling

Each Yoga node has an associated style. Nodes may be styled using similar properties to CSS, with some caveats.

Default styles

The default Yoga node style is similar to a box on web set to display: flex, with a few notable exceptions:

  1. flex-direction defaults to column instead of row
  2. align-content defaults to flex-start instead of stretch
  3. flex-shrink defaults to 0 instead of 1
  4. position defaults to relative instead of static

Yoga may be configured to align to the defaults on web for flex-direction, align-content, and flex-shrink by setting the UseWebDefaults flag.

:::warning

Because UseWebDefaults was established before the introduction of position: 'static', it does not change the default position, in order to preserve compatibility.

:::

Box Sizing

Yoga acts as if box-sizing: 'border-box' is set. This means that specified dimensions for a box will include the space taken for padding and border.

Edges

Margin, padding, position, and border, are set against an Edge, which may be:

  1. Relative to writing direction (start/end)
  2. A physical edge (top/right/left/bottom)
  3. A collection of edges (vertical/horizontal/all)

A style value may be set against multiple Edge values at once, with precedence given in the above order.

Units

Yoga does not operate on CSS units like px or em. Yoga instead works on "points", representing an arbitrary, canonical absolute unit (usually mapped to display independent pixels), along with percentage. Other units should be absolutized before being given to Yoga.

Non-standard properties

Yoga's aspect-ratio property was added before the same property was added to CSS, and may act subtlety different. These differences may be reconciled in a future version of Yoga.

Yoga's flex shorthand will act as flex-grow if positive, or flex-shrink if negative.