6. Flexbox в React Native

React Native использует Flexbox для всего layout. Важное отличие: по умолчанию flexDirection: 'column' (а не row как в вебе).

Основные отличия от CSS Flexbox

CSS Web	React Native	Примечание
display: flex	По умолчанию	Всё — flex
flex-direction: row	flexDirection: 'column'	Дефолт column!
justify-content: flex-start	justifyContent: 'flex-start'	То же
align-items: stretch	alignItems: 'stretch'	То же

flex vs width/height

// flex: 1 — занять всё доступное пространство
<View style={{ flex: 1, backgroundColor: '#313244' }} />

// Пропорциональное распределение
<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 1, backgroundColor: '#cba6f7' }} /> {/* 1/3 */}
  <View style={{ flex: 2, backgroundColor: '#89b4fa' }} /> {/* 2/3 */}
</View>

justifyContent — по главной оси

// flexDirection: 'column' (дефолт) — вертикальная ось
justifyContent: 'flex-start'   // сверху
justifyContent: 'center'       // по центру
justifyContent: 'flex-end'     // снизу
justifyContent: 'space-between' // равные промежутки
justifyContent: 'space-around'  // промежутки + отступ по краям
justifyContent: 'space-evenly'  // равные промежутки везде

alignItems — по поперечной оси

alignItems: 'flex-start'  // left (в column)
alignItems: 'center'      // center
alignItems: 'flex-end'    // right
alignItems: 'stretch'     // растянуть (дефолт)

gap — промежутки между элементами

<View style={{ flexDirection: 'row', gap: 12 }}>
  <View style={styles.card} />
  <View style={styles.card} />
  <View style={styles.card} />
</View>

flexWrap — перенос строк

<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
  {tags.map(tag => (
    <View key={tag} style={styles.tag}>
      <Text>{tag}</Text>
    </View>
  ))}
</View>

position absolute

<View style={{ position: 'relative', height: 200 }}>
  <View style={styles.card} />

  {/* Overlay badge */}
  <View style={{
    position: 'absolute',
    top: 8,
    right: 8,
    backgroundColor: '#f38ba8',
    borderRadius: 12,
    paddingHorizontal: 8,
    paddingVertical: 4,
  }}>
    <Text style={{ color: '#1e1e2e', fontSize: 12 }}>Новый</Text>
  </View>
</View>