yoga/alignment.md at c536ab214d2291fab7442c1ef473d2ea64282495

Files

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

4.3 KiB

Raw Blame History

docid, title, layout, permalink

docid	title	layout	permalink
alignment	Alignment	docs	/docs/alignment/

AlignItems

The AlignItems property describes how to align children along the cross axis of their container. AlignItems is very similar to JustifyContent but instead of applying to the main axis, it applies to the cross axis. There are 4 options for AlignItems:

Stretch (default)
FlexStart
FlexEnd
Center

The only non-obvious option of the four is Stretch. With AlignItems = Stretch you instruct children to match the size of their container in the cross axis.

AlignItems = Stretch

AlignItems = FlexStart

AlignItems = FlexEnd

AlignItems = Center

AlignSelf

The AlignSelf property has the same options and effect as AlignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent.

This property overrides any option set by the parent via the AlignItems property.

AlignItems = FlexEnd; AlignSelf = FlexStart;

AlignContent

The AlignContent property is used to control how multiple lines of content are aligned within a container which uses FlexWrap = wrap. There are 6 options:

FlexStart (default)
FlexEnd
Center
Stretch
SpaceBetween
SpaceAround

4.3 KiB Raw Blame History