PricingLoginStart free
React Native Academy · Lektion

Flexbox-retning, justifyContent og alignItems

Styr, hvordan underordnede elementer arrangeres i en View, ved hjælp af flexDirection, justifyContent og alignItems til at centrere, fordele og justere elementer.

Lektion 2 af 413 trin

Flexbox-retning, justifyContent og alignItems er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Flexbox er standardsystemet til layout

React Native bruger Flexbox som layoutalgoritme for alle View-komponenter — der findes ikke et blok- eller inline-layout som i CSS. Alle View-komponenter er automatisk Flex-containere, hvilket betyder, at deres underordnede elementer som standard placeres efter Flexbox-reglerne. Den vigtigste forskel fra Flexbox i web-CSS er, at React Natives standardværdi for flexDirection er 'column' og ikke 'row' som på webtet. Det betyder, at underordnede elementer som standard stables lodret, hvilket passer til, hvordan de fleste mobilskærme er opbygget.

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 kontra column

flexDirection angiver Flex-containerens hovedakse. Med 'column' (standardværdien) stables underordnede elementer oppefra og ned. Med 'row' placeres de fra venstre mod højre. Værdierne 'column-reverse' og 'row-reverse' vender rækkefølgen. Når du ændrer flexDirection, ændrer du også den akse, som justifyContent og alignItems påvirker — justifyContent fungerer altid langs hovedaksen, og alignItems langs tværaksen. Dette er den vigtigste Flexbox-egenskab at forstå.

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 langs hovedaksen

justifyContent styrer, hvordan underordnede elementer fordeles langs hovedaksen (lodret for column, vandret for row). De mest nyttige værdier er: 'flex-start' (samles ved starten, standardværdien), 'flex-end' (samles ved slutningen), 'center' (centrerer gruppen), 'space-between' (det første og sidste element rører kanterne, med lige store mellemrum mellem de øvrige), 'space-around' (lige meget plads omkring hvert underordnet element) og 'space-evenly' (lige meget plads, også ved kanterne). 'space-between' bruges især ofte til navigationsbjælker og rækker med handlingsknapper.

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 langs tværaksen

alignItems styrer, hvordan underordnede elementer placeres på tværaksen (vinkelret på hovedaksen). I en column-container justeres elementerne vandret, og i en row-container justeres de lodret. Værdierne er: 'flex-start' (standard for column på Android, hvor elementerne ligger ved starten), 'flex-end', 'center' og 'stretch' (elementerne udvides, så de udfylder tværaksen — dette er standard på iOS og giver mening i column-layout, hvor du ønsker underordnede elementer i fuld bredde). 'baseline' justerer underordnede elementers tekstbaselinjer.

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 },
});

Centrering af indhold med flex, justify og align

Et meget almindeligt mønster er at centrere indhold både lodret og vandret — for eksempel på startskærme, i tomme tilstande eller ved indlæsningsindikatorer. Angiv flex: 1 på containeren, så den udfylder den tilgængelige plads, og anvend derefter justifyContent: 'center' og alignItems: 'center'. Da standardværdien for flexDirection er column, centreres de underordnede elementer midt på skærmen både lodret og vandret. Denne kombination af tre egenskaber er sandsynligvis det mest brugte layoutmønster 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: tilsidesættelse af justering på tværaksen

alignSelf tilsidesætter forælderens alignItems for et bestemt underordnet element. Den accepterer de samme værdier som alignItems: 'auto' (brug forælderens indstilling), 'flex-start', 'flex-end', 'center' og 'stretch'. Det er nyttigt, når de fleste søskende har samme justering, men ét underordnet element skal behandles anderledes — for eksempel i en række ikoner, hvor ét ikon er større og skal justeres øverst, mens de øvrige centreres. Brug alignSelf med måde; det er lettere at vedligeholde, hvis du justerer forælderens alignItems og bruger omsluttende View-komponenter efter 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 og columnGap

I stedet for at tilføje margin til hvert underordnet element kan du bruge gap på containeren til at angive ensartet afstand mellem Flex-elementerne. gap angiver både række- og kolonneafstand, mens rowGap og columnGap styrer dem uafhængigt af hinanden. Det fjerner behovet for marginBottom på alle andre end det sidste underordnede element samt behovet for det trick, hvor du tilføjer negativ margen til containeren. Understøttelse af gap blev tilføjet i React Native 0.71 (tilgængeligt i Expo SDK 48+), så kontrollér din RN-version, før du bruger det i ældre projekter.

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: ombrydning af underordnede elementer til næste linje

Som standard formindskes Flex-elementer, så de passer på én linje, og de ombrydes aldrig. Angiv flexWrap: 'wrap' på containeren for at lade elementerne fortsætte på næste række (ved row-retning) eller næste kolonne (ved column-retning), når der ikke er mere plads. Dette er grundlaget for skyer af tags, gitterlignende layouts med procentbredder og enhver brugerflade, hvor elementer naturligt skal fortsætte på næste linje. 'nowrap' er standardværdien, mens 'wrap-reverse' ombryder i den modsatte retning.

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' },
});

Et praktisk layout til en overskrift

Brug din viden om Flexbox til at opbygge et almindeligt mønster i mobilapps: en navigationsoverskrift med en tilbageknap til venstre, en centreret titel og et menuikon til højre. Brug flexDirection: 'row' og alignItems: 'center' på overskriftens container. Giv titlen flex: 1, så den udvides og udfylder den resterende plads og centrerer sig mellem de sideikoner, der har fast bredde. Det er renere end at bruge position: 'absolute' til centrering og håndterer titler med forskellig længde 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' },
});

Fejlfinding af Flexbox-layouts

Flexbox-fejl er almindelige under udvikling af layouts. Nyttige fejlfindingsteknikker er: tilføj midlertidigt backgroundColor til hver View for at gøre dens grænser synlige, brug React DevTools til at undersøge det beregnede layout i komponenttræet, kontrollér, om flex: 1 mangler i overordnede containere (en container uden flex: 1 klapper sammen til nul højde, så dens underordnede elementer bliver usynlige), og kontrollér, at flexDirection har den værdi, du ønsker (husk, at React Native som standard bruger column og ikke row). Det er en pålidelig måde at isolere layoutfejl på at fjerne alle typografier og tilføje dem igen én ad gangen.

// 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!

Række med ikon, tekst og handling

Et af de mest almindelige mønstre i mobile brugerflader er en listerække med et ikon til venstre, tekst i midten og en handlingsknap til højre. Implementér den med flexDirection: 'row' på containeren, alignItems: 'center' for at justere alle underordnede elementer lodret, en View med fast størrelse til ikonet til venstre, et tekstområde med flex: 1 i midten (så det udvides og udfylder den tilgængelige plads) og en handlingsknap med fast størrelse til højre. Dette mønster findes på indstillingsskærme, i kontaktlister og i alle datatætte tabelvisninger i mobilapps.

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' },
});

Hurtig kontrol

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: flexDirection angiver hovedaksen (kolonne som standard i React Native, ikke række), justifyContent fordeler underordnede elementer langs hovedaksen, og alignItems justerer underordnede elementer på tværaksen. Nu ser vi nærmere på flex-egenskaben og responsiv størrelsestilpasning på tværs af skærmdimensioner.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Flexbox-retning, justifyContent og alignItems” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Flexbox-retning, justifyContent og alignItems”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Flexbox-retning, justifyContent og alignItems”?

Styr, hvordan underordnede elementer arrangeres i en View, ved hjælp af flexDirection, justifyContent og alignItems til at centrere, fordele og justere elementer. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Flexbox-retning, justifyContent og alignItems”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. StyleSheet.create og inline-typografier
  2. Flexbox-retning, justifyContent og alignItems
  3. flex, flexGrow og responsiv størrelsestilpasning
  4. Opbygning af et responsivt kortgitter
← Tilbage til React Native Academy