PricingLoginStart free
React Native Academy · Lektion

Flexbox-riktning, JustifyContent och AlignItems

Styr hur barnkomponenter ordnas i en View med flexDirection, justifyContent och alignItems för att centrera, fördela utrymme och justera element.

Lektion 2 av 413 steg

Flexbox-riktning, JustifyContent och AlignItems är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Flexbox är standardsystemet för layout

React Native använder Flexbox som layoutalgoritm för varje View-komponent — det finns ingen block- eller inline-layout som i CSS. Varje View är automatiskt en Flex-container, vilket innebär att dess underordnade komponenter som standard placeras enligt Flexbox-reglerna. Den viktigaste skillnaden mot Flexbox i CSS på webben är att React Natives standardvärde för flexDirection är 'column', inte 'row' som på webben. Det innebär att underordnade komponenter som standard staplas vertikalt, vilket motsvarar hur de flesta mobilskärmar är uppbyggda.

import { View, StyleSheet } from 'react-native';

export default function DefaultFlex() {
  return (
    // No flexDirection needed — 'column' is the default
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5', padding: 16 },
  box1: { height: 60, backgroundColor: '#ff6b6b', marginBottom: 8 },
  box2: { height: 60, backgroundColor: '#4f86f7', marginBottom: 8 },
  box3: { height: 60, backgroundColor: '#51cf66' },
});

flexDirection: row jämfört med column

flexDirection anger Flex-containerns huvudaxel. Med 'column' (standardvärdet) staplas underordnade komponenter uppifrån och ned. Med 'row' placeras de från vänster till höger. Värdena 'column-reverse' och 'row-reverse' vänder på ordningen. När Ni ändrar flexDirection ändras även vilken axel justifyContent och alignItems påverkar — justifyContent fungerar alltid längs huvudaxeln och alignItems längs tväraxeln. Detta är den viktigaste Flexbox-egenskapen att förstå.

import { View, StyleSheet } from 'react-native';

export default function DirectionDemo() {
  return (
    <View style={{ flex: 1, gap: 16, padding: 16 }}>
      {/* Column: children stack vertically (default) */}
      <View style={{ flexDirection: 'column', height: 120, backgroundColor: '#f0f0f0' }}>
        <View style={styles.box} />
        <View style={styles.box} />
      </View>

      {/* Row: children sit side by side */}
      <View style={{ flexDirection: 'row', height: 60, backgroundColor: '#f0f0f0' }}>
        <View style={styles.box} />
        <View style={styles.box} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  box: { width: 50, height: 50, backgroundColor: '#4f86f7', margin: 4 },
});

justifyContent: justering längs huvudaxeln

justifyContent styr hur underordnade komponenter fördelas längs huvudaxeln (vertikalt för column och horisontellt för row). De mest användbara värdena är: 'flex-start' (samla i början, standardvärde), 'flex-end' (samla i slutet), 'center' (centrera gruppen), 'space-between' (den första och sista ligger mot kanterna, med lika stora mellanrum mellan de övriga), 'space-around' (lika mycket utrymme runt varje underordnad komponent) och 'space-evenly' (lika mycket utrymme, även vid kanterna). 'space-between' används särskilt ofta för navigeringsfält och rader med åtgärdsknappar.

import { View, Text, StyleSheet } from 'react-native';

export default function SpaceBetween() {
  return (
    <View style={styles.row}>
      <Text style={styles.tab}>Home</Text>
      <Text style={styles.tab}>Search</Text>
      <Text style={styles.tab}>Profile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between', // distribute across full width
    paddingHorizontal: 24,
    paddingVertical: 16,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  tab: { fontSize: 14, color: '#666' },
});

alignItems: justering längs tväraxeln

alignItems styr hur underordnade komponenter placeras längs tväraxeln (vinkelrätt mot huvudaxeln). I en column-container justeras komponenterna horisontellt, och i en row-container justeras de vertikalt. Värden: 'flex-start' (standardvärde för column på Android, objekten placeras mot början), 'flex-end', 'center' och 'stretch' (objekten expanderar för att fylla tväraxeln — detta är standardvärdet på iOS och passar för column-layouter där Ni vill att underordnade komponenter ska ha full bredd). 'baseline' justerar underordnade komponenters textbaslinjer.

import { View, Text, StyleSheet } from 'react-native';

export default function AlignDemo() {
  return (
    <View style={styles.container}>
      {/* Row: alignItems centers children vertically */}
      <View style={styles.row}>
        <Text style={styles.smallText}>Small</Text>
        <Text style={styles.largeText}>LARGE</Text>
        <Text style={styles.smallText}>Small</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  row: {
    flexDirection: 'row',
    alignItems: 'center', // vertically center all items
    backgroundColor: '#e8f0fe',
    padding: 16,
    borderRadius: 8,
  },
  smallText: { fontSize: 12, color: '#666', marginHorizontal: 8 },
  largeText: { fontSize: 28, fontWeight: 'bold', color: '#111', marginHorizontal: 8 },
});

Centrera innehåll med flex, justify och align

Ett mycket vanligt mönster är att centrera innehåll både vertikalt och horisontellt — exempelvis på startskärmar, i tomma tillstånd eller för laddningsindikatorer. Ange flex: 1 för containern så att den fyller det tillgängliga utrymmet, och använd sedan justifyContent: 'center' samt alignItems: 'center'. Eftersom standardvärdet för flexDirection är column centreras de underordnade komponenterna mitt på skärmen, både vertikalt och horisontellt. Denna kombination av tre egenskaper är förmodligen det mest använda layoutmönstret i React Native.

import { View, Text, StyleSheet } from 'react-native';

export default function CenteredScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.emoji}>🎯</Text>
      <Text style={styles.title}>Nothing here yet</Text>
      <Text style={styles.subtitle}>Add your first item to get started</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // vertical center (column main axis)
    alignItems: 'center',     // horizontal center (column cross axis)
    backgroundColor: '#f8f9fa',
  },
  emoji: { fontSize: 56, marginBottom: 16 },
  title: { fontSize: 22, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 14, color: '#999', marginTop: 8, textAlign: 'center' },
});

alignSelf: åsidosätt justering längs tväraxeln

alignSelf åsidosätter den överordnade komponentens alignItems för en specifik underordnad komponent. Den accepterar samma värden som alignItems: 'auto' (använd den överordnade komponentens inställning), 'flex-start', 'flex-end', 'center' och 'stretch'. Detta är användbart när de flesta syskonkomponenter har samma justering men en komponent behöver behandlas annorlunda — till exempel i en rad med ikoner där en ikon är större och ska justeras mot toppen medan de andra centreras. Använd alignSelf sparsamt; det är mer lättunderhållet att justera den överordnade komponentens alignItems och använda omslutande Views vid behov.

import { View, Text, StyleSheet } from 'react-native';

export default function AlignSelfExample() {
  return (
    <View style={styles.row}>
      <View style={styles.boxSmall} />
      {/* This box aligns to flex-end independently */}
      <View style={[styles.boxSmall, { alignSelf: 'flex-end', backgroundColor: 'red' }]} />
      <View style={styles.boxSmall} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center', // default for siblings
    height: 100,
    backgroundColor: '#e8f0fe',
    padding: 8,
    gap: 8,
  },
  boxSmall: { width: 50, height: 50, backgroundColor: '#4f86f7', borderRadius: 6 },
});

gap, rowGap och columnGap

I stället för att lägga till margin på varje underordnad komponent kan Ni använda gap på containern för att ange ett enhetligt avstånd mellan Flex-komponenterna. gap anger både rad- och kolumnavstånd, medan rowGap och columnGap styr dem oberoende av varandra. Då behövs varken marginBottom på alla utom den sista komponenten eller tricket att lägga till negativ marginal på containern. Stöd för gap lades till i React Native 0.71 (tillgängligt i Expo SDK 48 och senare), så kontrollera Er RN-version innan Ni använder det i äldre projekt.

import { View, StyleSheet } from 'react-native';

export default function GapExample() {
  return (
    <View style={styles.container}>
      {[1, 2, 3, 4].map(n => (
        <View key={n} style={styles.card} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,           // equal gap between all children
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  card: {
    width: '47%',      // two columns
    height: 100,
    backgroundColor: '#4f86f7',
    borderRadius: 10,
  },
});

flexWrap: radbryt underordnade komponenter till nästa rad

Som standard krymper Flex-komponenter för att få plats på en enda rad och radbryts aldrig. Ange flexWrap: 'wrap' på containern för att låta komponenterna brytas till nästa rad (med row-riktning) eller nästa kolumn (med column-riktning) när utrymmet tar slut. Detta är grunden för taggmoln, rutnätsliknande layouter med procentbaserade bredder och alla gränssnitt där objekt naturligt ska flöda över till nästa rad. 'nowrap' är standardvärdet; 'wrap-reverse' bryter i motsatt riktning.

import { View, Text, StyleSheet } from 'react-native';

const tags = ['React Native', 'Mobile', 'iOS', 'Android', 'JavaScript', 'Flexbox', 'Expo'];

export default function TagCloud() {
  return (
    <View style={styles.container}>
      {tags.map(tag => (
        <View key={tag} style={styles.tag}>
          <Text style={styles.tagText}>{tag}</Text>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 16 },
  tag: { backgroundColor: '#e8f0fe', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 },
  tagText: { color: '#4f86f7', fontSize: 13, fontWeight: '500' },
});

En praktisk layout för ett sidhuvud

Använd Era kunskaper om Flexbox för att bygga ett vanligt mönster i mobilappar: ett navigeringssidhuvud med en bakåtknapp till vänster, en centrerad titel och en menyikon till höger. Använd flexDirection: 'row' och alignItems: 'center' på sidhuvudets container. Ge titeln flex: 1 så att den expanderar och fyller det återstående utrymmet och centrerar sig mellan de sidoplacerade ikonerna med fast bredd. Detta är renare än att använda position: 'absolute' för centrering och hanterar titlar med varierande längd korrekt.

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Header({ title, onBack, onMenu }) {
  return (
    <View style={styles.header}>
      <TouchableOpacity style={styles.sideBtn} onPress={onBack}>
        <Text style={styles.icon}>←</Text>
      </TouchableOpacity>

      <Text style={styles.title} numberOfLines={1}>{title}</Text>

      <TouchableOpacity style={styles.sideBtn} onPress={onMenu}>
        <Text style={styles.icon}>⋯</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ddd',
  },
  sideBtn: { width: 40, alignItems: 'center' },
  title: { flex: 1, fontSize: 18, fontWeight: '600', color: '#111', textAlign: 'center' },
  icon: { fontSize: 22, color: '#333' },
});

Felsökning av Flexbox-layouter

Flexbox-buggar är vanliga när Ni utvecklar layouter. Användbara felsökningstekniker är: lägg till en tillfällig backgroundColor på varje View för att synliggöra dess gränser, använd React DevTools för att granska den beräknade layouten i komponentträdet, kontrollera om flex: 1 saknas i överordnade containrar (en container utan flex: 1 kollapsar till nollhöjd, vilket gör dess underordnade komponenter osynliga) och kontrollera att flexDirection har det värde Ni avser att använda (kom ihåg att React Native har column som standard, inte row). Att ta bort alla stilar och lägga tillbaka dem en i taget är ett tillförlitligt sätt att isolera layoutbuggar.

// Debug technique: color-code your Views temporarily
const debugStyles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }, // red tint
  inner: { backgroundColor: 'rgba(0,0,255,0.1)' },              // blue tint
  text: { backgroundColor: 'rgba(0,255,0,0.1)' },               // green tint
});

// Then you can see exactly where each View starts and ends
// Remove these debug colors before shipping!

Rad med ikon, text och åtgärd

Ett av de vanligaste mönstren i mobila användargränssnitt är en listrad med en ikon till vänster, text i mitten och en åtgärdsknapp till höger. Implementera den med flexDirection: 'row' på containern, alignItems: 'center' för att justera alla underordnade komponenter vertikalt, en ikon-View med fast storlek till vänster, ett textområde med flex: 1 i mitten (så att det expanderar och fyller det tillgängliga utrymmet) och en åtgärdsknapp med fast storlek till höger. Detta mönster förekommer på inställningsskärmar, i kontaktlistor och i alla datatäta tabellvyer i mobilappar.

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function SettingsRow({ icon, label, subtitle, onPress }) {
  return (
    <TouchableOpacity style={styles.row} onPress={onPress}>
      {/* Left: icon */}
      <View style={styles.iconContainer}>
        <Text style={{ fontSize: 22 }}>{icon}</Text>
      </View>

      {/* Middle: text content — flex: 1 fills space */}
      <View style={{ flex: 1 }}>
        <Text style={styles.label} numberOfLines={1}>{label}</Text>
        {subtitle && <Text style={styles.subtitle} numberOfLines={1}>{subtitle}</Text>}
      </View>

      {/* Right: chevron */}
      <Text style={styles.chevron}>›</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12, backgroundColor: '#fff', gap: 12 },
  iconContainer: { width: 36, height: 36, borderRadius: 8, backgroundColor: '#f0f4ff', alignItems: 'center', justifyContent: 'center' },
  label: { fontSize: 16, color: '#222' },
  subtitle: { fontSize: 13, color: '#999', marginTop: 2 },
  chevron: { fontSize: 22, color: '#ccc', fontWeight: '300' },
});

Snabbtest

Testa Era kunskaper om koncepten inom React Native Mobile Development från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har Ni lärt Er att: flexDirection anger huvudaxeln (kolumn som standard i React Native, inte rad), justifyContent fördelar underordnade element längs huvudaxeln och alignItems justerar underordnade element längs tväraxeln. Härnäst utforskar vi egenskapen flex och responsiv storleksanpassning för olika skärmstorlekar.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
30
Lektioner
120
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Flexbox-riktning, JustifyContent och AlignItems” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Flexbox-riktning, JustifyContent och AlignItems”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Flexbox-riktning, JustifyContent och AlignItems”?

Styr hur barnkomponenter ordnas i en View med flexDirection, justifyContent och alignItems för att centrera, fördela utrymme och justera element. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Flexbox-riktning, JustifyContent och AlignItems”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. StyleSheet.create och inline-stilar
  2. Flexbox-riktning, JustifyContent och AlignItems
  3. flex, flexGrow och responsiv storlek
  4. Bygga ett responsivt kortnät
← Tillbaka till React Native Academy