Files
yoga/docs/_docs/flexbox/minmaxdimen.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.0 KiB

docid, title, layout, permalink
docid title layout permalink
min-max-dimen Min & Max dimensions docs /docs/min-max-dimen/

Using MinWidth, MinHeight, MaxWidth, and MaxHeight gives you increased control over the final size of items in a layout. By mixing these properties with FlexGrow, FlexShrink, and AlignItems = Stretch, you are able to have items with dynamic size within a range which you control.

An example of when Max properties can be useful is if you are using AlignItems = Stretch but your know that your item won't look good after it increases past a certain point. In this case, your item will stretch to the size of its parent or until it is as big as specified in the Max property.

Same goes for the Min properties when using FlexShrink. For example, you may want children of a container to shrink to fit on one row, but if you specify a minimum width, they will break to the next line after a certain point (if you are using FlexWrap = Wrap).

Another case where Min and Max dimension constraints are useful is when using AspectRatio.

FlexGrow = 1; MaxWidth = 200;

FlexGrow = 1

AlignItems = Stretch; MaxHeight: 100;