Yoga

The main body is translated from

https://facebook.github.io/yoga/docs

Partially refer to Nguyen Yifeng Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Yoga

With the rise of front-end technology in recent years, the layout system as the back-end UI skeleton has also occupied an increasingly important position in it.Whether mobile, desktop or web, especially the screen size and resolution of different devices are ever-changing, how to build a good layout system to cope with these changes has become increasingly important.

Currently, each platform has its own set of solutions.The iOS platform has an automatic layout system, Android has a container layout system, and the web side has a CSS-based layout system.The disadvantages brought by the coexistence of multiple layout systems are obvious, sharing between platforms becomes difficult, and each platform requires special personnel to develop and maintain, which increases development costs.

Facebook has done a lot of work on this issue. First, Facebook introduced a cross-platform CSS-based layout system in React Native

As the system continued to evolve, Facebook decided to launch it in reboot and name it

不同于其它的一些布局框架，比如bootstrap的栅格系统或

Default values

div {
  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  align-content: flex-start;

  border-width: 0px;
  margin: 0px;
  padding: 0px;
  min-width: 0px;
}

Flexbox concept

Elements that use a Flex layout are called Flex containers, or“Containers” for short. All of its child elements automatically become members of the container, called flex item

img

By default, the container has two axes: the horizontal main axis and the vertical cross axis. The starting position of the spindle (where it intersects the border) is called

Item默认沿主轴排列。单个Item占据的主轴空间叫做

Container properties

FlexDirection 和 direction

The Direction property determines the direction of the spindle (that is, the direction in which the Item is arranged)

• Column (the default) has a vertical spindle, starting at the top edge.
• The Row spindle is horizontal and the starting point is at the left end.
• The ConlumnRverse spindle is vertical, with a starting point on the lower edge.
• Rowreverse spindle is horizontal, starting at the right.

JustifyContent

Property defines the alignment of the Item on the spindle.

Justify content the alignment depends on the direction of the Axis. The following assumes that the principal axis is left to right:

• FlexStart (default) is left-aligned
• FlexEnd is right-aligned
• Center Center
• SpaceBetween is justified, and the intervals between items are equal.
• Spacearound each Item has equal spacing on both sides. Therefore, the interval between items is twice as large as the interval between Item and the border.

Flex Wrap

By default, Items are arranged on a single line, also known as a grid.

• Nowrap does not wrap (default)
• Wrap wraps, with the first line above.

If the container specifies FlexWrap = Wrap, its child views will wrap to the next line instead of overflowing.The next line will have the same FlexDirection and the first line will appear along the horizontal axis

Alignment alignment

The AlignItems property defines how to align on the cross axis. There are four options AlignItems:

• Stretch Stretch (default)
• The start point of the FlexStart cross axis is aligned.
• FlexEnd 交叉轴的终点对齐。
• The middle point alignment of the Center cross axis.

AlignItems = Stretch indicates that the child view adapts to the parent view size in the cross-axis direction.

AlignSelf

AlignSelf and AlignItems have the same options and effects, but act on child views inside the container, and this property overrides the AlignItems property set by the parent view.

AlignContent

The Grid property defines the alignment of multiple grid lines.If Item has only one axis, this property has no effect.There are 6 options:

• FlexStart (the default) is aligned to the starting point of the cross axis
• FlexEnd aligns with the end of the cross axis.
• Center is aligned to the midpoint of the cross axis.
• The Stretch axis takes up the entire cross axis.
• SpaceBetween is aligned with the ends of the cross axis, and the intervals between the axes are evenly distributed.
• Spacearound each axis is spaced equally on both sides. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.

See code

Item property

FlexGrow

Property defines the magnification ratio of the Item, which defaults to

If all Item's

FlexShrink

Property defines the reduction ratio of the Item, which defaults to 1, meaning that the Item will be reduced if there is not enough space.

If all items are

Negative values are not valid for this property.

FlexBasis

Property defines a default size for Flex projects before allocating the rest of the Flex container.

Absolute positioning

The attribute tells the flexbox item's location in the container in two ways:

• (default) Relative layout
• Absolute layout

Position = Absolute has six attributes:

• -
• -
• -
• -
• - x
• - container.width-item.maxX

Margin, Padding

Margin: outer Margin padding: inner Margin

Aspect ratio

Aspectratio = cross axis direction length/spindle direction length

• After you set width, AspectRatio controls height. width.
• 设置height后AspectRatio控制width.
• After setting FlexBasis, AspectRatio controls the cross-axis range of the item.
• Set item to Stretch and the spindle is not defined, then AspectRatio controls the item spindle range.
• After setting FlexGrow or FlexShrink, if the cross-axis range is not defined, AspectRatio controls the cross-axis range.
• If item both ranges are defined, AspectRatio is ignored

And Flexbox

Yoga is a subset of flexbox, with some property changes:

• zIndex is not supported
• Order 不支持 。order属性已经被框架定义
• Visibility is not supported, so use visible instead. Collapse and hidden are not supported
• Wrap properties only wrap and nowrap, and wrap-reverse is not supported
• margin cannot be set to auto must be set to pixel value, default 0
• Baseline is not supported
• width, maxWidth, minWidth, height, maxHeight and minHeight must be pixel values, percentages are not supported
• Do not force the layout to be broken
• Vertical inline orientation, such as vertical text, is not supported
• Description: flexDirection is the default column in the row algorithm