Layout

With Flexbox, you can specify the layout of an element and its children to provide a consistent layout on different screen sizes.

Setting the Flex Direction establishes the main axis and direction that child elements are placed along in the layout.

Parameter	Description
Row	Places child elements horizontally.
Column	Places child elements vertically.
Row Reverse	Places child elements horizontally and additionally reverses the order that the elements are displayed.
Column Reverse	Places child elements vertically and additionally reverses the order that elements are displayed.

Yoga Docs React Native Docs CSS Tricks

Setting align items determines how child elements are spread across the remaining space of the cross axis (the opposite of the axis set in Flex Direction) they lie on.

Parameter	Description
Flex Start	Child elements are positioned at the beginning of the container.
Flex End	Child elements are positioned at the end of the container.
Center	Child elements are positioned in the center of the container.
Stretch	Child elements will stretch to fill the container.
Baseline	Child elements are positioned so that their baselines are lined up with each other.

Yoga Docs React Native Docs CSS Tricks

The Justify Content property determines how children elements are spread across the remaining space of the axis they lie on.

Parameter	Description
Flex Start	Child elements are grouped together and positioned at the beginning of the line.
Flex End	Child elements are grouped together and positioned at the end of the line.
Center	Child elements are grouped together and centered in the middle of the line.
Space Between	The first child element is positioned at the beginning, the last child element is positioned at the end and all remaining child elements are spread out evenly in between.
Space Around	Child elements are spread out across the line with equal amounts of space surrounding them.
Space Evenly	Items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

Yoga Docs React Native Docs CSS Tricks

Align Self shares the same positioning behavior as align items, however, it is set on each individual child element and overrides the settings applied to the parent element in Align Items.

Parameter	Description
Flex Start	The child element will be positioned at the beginning of the container.
Flex End	The child element will be positioned at the end of the container.
Center	The child element will be positioned in the center of the container.
Baseline	The child element will stretch to fill the container.
Stretch	The child element will stretch to fill the container.

Yoga Docs React Native Docs CSS Tricks

The Flex Grow property describes how a child element will automatically resize itself in relation to other child elements within a parent element.

Flex grow can be set to any number greater than 0.

Yoga Docs

Flex Shrink is generally used in tangent with Flex Grow and determines the behavior of children elements once they exceed the size of the container. Just like Flex Grow, Flex Shrink sets a relative value on the children elements. Setting an element's Flex Shrink to 0 prevents the element from shrinking at all and will retain its original size calculated from the Flex Grow setting or from the set width and height.

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Yoga Docs

Flex basis is an axis-independent way of providing the default size of an item along the main axis. Setting the flex basis of a child is similar to setting the width of that child if its parent is a container with flex direction: row or setting the height of a child if its parent is a container with flex direction: column. The flex basis of an item is the default size of that item, the size of the item before any flex grow and flex shrink calculations are performed.

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Yoga Documentation

The Flex Wrap property is set on a container and determines how child elements will be laid out if they exceed the maximum dimensions of the container.

Parameter	Description
None	Forces all of the child elements onto one line and which has the potential to force shrink the elements in order to make them fit on the same line.
Wrap	The child elements will be placed along multiple lines, as needed, allowing them to retain their intended sizes.
Reverse	The same as Wrap, however the order of the child elements is reversed.

Yoga Docs

Align Content is only applicable when children elements are in a container that is set to flex wrap and there are multiple lines of children elements. Setting the Align Content property determines how the lines of elements are positioned on the cross-axis (the axis opposite of the main axis defined in Flex Direction).

Parameter	Description
Flex Start	Lines are grouped together and positioned at the beginning of the cross axis.
Flex End	Lines are grouped together and positioned at the end of the cross axis.
Stretch	Lines are stretched to the height of the container's cross axis.
Center	Lines are grouped together and positioned in the center of the container's cross axis.
Space Between	The first line is positioned at the beginning of the cross axis, the last element is positioned at the end of the cross axis, and all remaining lines are spread out evenly in between.
Space Around	All the lines are spread out across the cross axis of the container with equal amounts of space surrounding them.

Yoga Docs CSS Tricks

Updated about a month ago

• Table of Contents

  • Flex Items

    • Flex Direction

    • Align Items

    • Justify Content

  • Selected Item

    • Align Self

    • Flex Grow

    • Flex Shrink

    • Flex Basis

  • Content

    • Flex Wrap

    • Align Content