DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
d1bd845fb72b7d25b29c7827a37571d4bf3c7865
yoga/docs/_docs/yoga/aspect-ratio.md
Emil Sjolander f2080e520f Move yoga docs into docs folder on master branch 
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes.

Reviewed By: JoelMarcey

Differential Revision: D4365700

fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
2016-12-28 04:09:48 -08:00

2.3 KiB
Raw Blame History

docid, title, layout, permalink
docid title layout permalink
aspect-ratio Aspect ratio docs /docs/aspect-ratio/

AspectRatio is a property introduced by Yoga. AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. AspectRatio accepts any floating point value > 0, the default is undefined. AspectRatio can apply to either the width or the height of an item, it depends on which dimension is fixed. AspectRatio Also respects the Min and Max dimensions of an item.

  • If an item has a Width set then AspectRatio controls the item's height.
  • If an item has a Height set then AspectRatio controls the item's width.
  • If an item has a FlexBasis set then AspectRatio controls the item's cross axis dimension.
  • If an item's alignment is Stretch and its main axis is undefined then AspectRatio controls the item's main axis dimension.
  • If an item has FlexGrow or FlexShrink set then AspectRatio controls the item's cross axis dimension if it is undefined.
  • If both dimensions of an item are fixed then AspectRatio is ignored.

Width = 100; AspectRatio = 2;

Width = 100; AspectRatio = 0.5;

FlexDirection = Row; FlexGrow = 1; AspectRatio = 0.5;

FlexDirection = Row; AlignItems = Stretch; AspectRatio = 0.5;