How does Flexbox work in React Native?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex React Native topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
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.
Common Mistake
Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong React Native candidates.
Previous
What is the StyleSheet API in React Native?
Next
What is the difference between FlatList and ScrollView?