React Native
  • Initial page
  • Set-up
    • Prepare the environment
    • ESLint
    • Debugger
  • Introduction
    • React v.s. React Native
    • Project Tree & Script Structure
  • Component & Props
    • What is Props
    • What is Compoent
      • Axios and Component State
      • Class-base components
      • Example
        • Activity Indicator
        • Rendering Large list
        • Card
  • Styling
    • What is Styling
    • Primitive elements
    • Flexbox
      • justifyContent
      • flexDirection
    • More on styling
    • Alignment & Touchable Item
  • Redux
    • What is Redux
    • What is Reducer
  • React-thunk
    • Untitled
  • Build & Release
    • Untitled
Powered by GitBook
On this page

Was this helpful?

  1. Styling
  2. Flexbox

flexDirection

PreviousjustifyContentNextMore on styling

Last updated 6 years ago

Was this helpful?

Used to determine the item flow direction

flex=1
// This properties indicates the layout occupation percentage. 
// The occupation of layout is depends on {value}/{num of item in the same level}

// Given
<View style={{flex:1}}></View> // occupy 1/4
<View style={{flex:2}}></View> // occupy 2/4
<View style={{flex:1}}></View> // occupy 1/4

// This property means that 
// “please expand this component to fill the entire area content of the device”