Cơ BảnReact Native iconReact Native

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 flexDirectioncolumn (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.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native