Flexbox trong RN khác CSS web ra sao?

RN dùng Yoga engine của Meta — implement subset Flexbox. Khác biệt quan trọng:

• Default flexDirection là column (web là row). Cần nhớ: <View> xếp children theo chiều dọc mặc định.
• flex: 1 viết tắt cho flexGrow: 1, flexShrink: 1, flexBasis: 0 (đa số case web cũng vậy).
• Không có display: block/inline — chỉ flex hoặc absolute. <Text> luôn inline-like trong cùng một <Text> cha, ngoài ra render block.
• Không có gap đến RN 0.71; từ 0.71+ có gap/rowGap/columnGap.
• Không có auto cho margin trong vài context cũ — marginLeft: 'auto' để đẩy phải hoạt động trong flex.
• alignSelf: stretch là default (web là auto).
• % đơn vị chỉ work cho width/height/margin/padding/flexBasis — không cho mọi prop.
• Không có float, grid, multi-column, position: sticky.

Một số quirk: aspectRatio được hỗ trợ, transform array thay vì string, position: absolute định vị theo gần nhất parent có position: relative — giống web.

RN uses Meta's Yoga engine, which implements a Flexbox subset. Important differences:

• Default flexDirection is column (web is row). Remember: <View> stacks children vertically by default.
• flex: 1 shorthand maps to flexGrow: 1, flexShrink: 1, flexBasis: 0 (most web cases too).
• No display: block/inline — only flex or absolute. <Text> is inline-like within a parent <Text>, otherwise it renders block.
• No gap until RN 0.71; 0.71+ supports gap/rowGap/columnGap.
• No auto for margin in some older contexts — marginLeft: 'auto' to push right works inside flex.
• alignSelf: stretch is the default (web defaults to auto).
• % units work only for width/height/margin/padding/flexBasis — not every property.
• No float, grid, multi-column, or position: sticky.

Quirks: aspectRatio is supported, transform takes an array (not a string), and position: absolute positions against the nearest position: relative parent — same as the web.