How does Flexbox work in React Native?

React Native uses Flexbox as its primary layout system — similar to CSS Flexbox but with different defaults. Key difference from web CSS Flexbox: flexDirection defaults to "column" (not "row"). alignContent defaults to "flex-start". Core properties: flexDirection: "row" | "column" | "row-reverse" | "column-reverse" — direction of the main axis. Default: column (vertical). justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" — align along main axis. alignItems: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" — align along cross axis. flex: 1 — component grows to fill available space. Multiple children with flex: 1 share space equally. flexWrap: "wrap" | "nowrap". alignSelf — override parent's alignItems for one child. Common patterns: // Center content in screen: { flex: 1, justifyContent: "center", alignItems: "center" } // Row of items: { flexDirection: "row", justifyContent: "space-between" } // Fill remaining space: { flex: 1 } // Absolute positioning: { position: "absolute", top: 0, left: 0, right: 0 }. Width/Height: width: 100 (fixed px), width: "50%" (percentage of parent), width: "auto". Position: relative (default) or absolute. Absolute removes from flow, positions relative to nearest positioned ancestor.