PricingLoginStart free
React Native Academy · Oppitunti

Flexboxin suunta, justifyContent ja alignItems

Ohjatkaa View-komponentin lasten sijoittelua flexDirection-, justifyContent- ja alignItems-ominaisuuksilla keskittämällä, jakamalla tilaa ja tasaamalla elementtejä.

Oppitunti 2/413 vaihetta

Flexboxin suunta, justifyContent ja alignItems on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Flexbox on oletusarvoinen asettelujärjestelmä

React Native käyttää Flexboxia asettelualgoritmina jokaiselle View-komponentille — CSS:n kaltaista block- tai inline-asettelua ei ole. Jokainen View on automaattisesti Flex-säilö, joten sen lapset sijoitetaan oletusarvoisesti Flexbox-sääntöjen mukaisesti. Keskeinen ero verkkosivujen CSS-Flexboxiin on se, että React Nativen oletusarvoinen flexDirection on 'column', ei verkon tapaan 'row'. Tämä tarkoittaa, että lapset asettuvat oletusarvoisesti pystysuuntaan, mikä vastaa useimpien mobiilinäkymien rakennetta.

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

flexDirection määrittää Flex-säilön pääakselin. Arvolla 'column' (oletus) lapset asettuvat ylhäältä alas. Arvolla 'row' lapset asettuvat vasemmalta oikealle. Arvot 'column-reverse' ja 'row-reverse' kääntävät järjestyksen. flexDirection-arvon muuttaminen muuttaa myös sitä, mihin akseleihin justifyContent ja alignItems vaikuttavat — justifyContent toimii aina pääakselilla ja alignItems poikittaisakselilla. Tämä on tärkein ymmärrettävä Flexbox-ominaisuus.

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: Kohdistaminen pääakselilla

justifyContent määrittää, miten lapset jaetaan pääakselilla (column-suunnassa pystysuunnassa ja row-suunnassa vaakasuunnassa). Hyödyllisimmät arvot ovat: 'flex-start' (sijoittaa alkuun, oletus), 'flex-end' (sijoittaa loppuun), 'center' (keskittää ryhmän), 'space-between' (ensimmäinen ja viimeinen koskettavat reunoja ja muiden välit ovat yhtä suuret), 'space-around' (yhtä suuri tila jokaisen lapsen ympärillä) ja 'space-evenly' (yhtä suuret välit myös reunoilla). 'space-between' on erityisen yleinen navigointipalkeissa ja toimintopainikkeiden riveillä.

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: Kohdistaminen poikittaisakselilla

alignItems määrittää, miten lapset sijoitetaan poikittaisakselilla (kohtisuorassa pääakseliin nähden). Column-säilössä se kohdistaa lapset vaakasuunnassa ja row-säilössä pystysuunnassa. Arvot ovat 'flex-start' (column-suunnan oletus Androidilla, kohteet asettuvat alkuun), 'flex-end', 'center' ja 'stretch' (kohteet laajenevat täyttämään poikittaisakselin — tämä on oletus iOS:llä ja sopii column-asetteluihin, joissa lapsilta halutaan koko leveys). 'baseline' kohdistaa lasten tekstin peruslinjat.

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

Sisällön keskittäminen ominaisuuksilla flex, justify ja align

Hyvin yleinen käyttötapaus on sisällön keskittäminen sekä pysty- että vaakasuunnassa — esimerkiksi aloitusnäytöillä, tyhjissä näkymissä tai latausilmaisimissa. Asettakaa säilölle flex: 1, jotta se täyttää käytettävissä olevan tilan, ja käyttäkää sitten arvoja justifyContent: 'center' ja alignItems: 'center'. Koska oletusarvoinen flexDirection on column, tämä keskittää lapset näytön keskelle sekä pysty- että vaakasuunnassa. Tämä kolmen ominaisuuden yhdistelmä on luultavasti React Nativen käytetyin asettelumalli.

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: Poikittaisakselin kohdistuksen ohittaminen

alignSelf ohittaa tietyn lapsen kohdalla vanhemman alignItems-arvon. Se hyväksyy samat arvot kuin alignItems: 'auto' (käytä vanhemman asetusta), 'flex-start', 'flex-end', 'center' ja 'stretch'. Tämä on hyödyllistä, kun useimmilla sisaruksilla on sama kohdistus mutta yksi lapsi tarvitsee erilaisen käsittelyn — esimerkiksi kuvakerivillä, jossa yksi kuvake on suurempi ja se pitäisi kohdistaa yläreunaan muiden ollessa keskitettyinä. Käyttäkää alignSelf-ominaisuutta harkiten; ylläpidettävämpää on säätää vanhemman alignItems-arvoa ja käyttää tarvittaessa wrapper View -komponentteja.

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 ja columnGap

Sen sijaan että lisäisitte margin-ominaisuuden jokaiseen lapseen, käyttäkää säilön gap-ominaisuutta Flex-lasten tasaisen välistyksen määrittämiseen. gap määrittää sekä rivi- että sarakevälit, kun taas rowGap ja columnGap hallitsevat niitä erikseen. Näin ei tarvita marginBottom-ominaisuutta kaikkiin paitsi viimeiseen lapseen eikä säilöön lisättävää negatiivisen marginaalin kiertoratkaisua. Gap-tuki lisättiin React Nativeen versiossa 0.71 (saatavilla Expo SDK 48:sta alkaen), joten tarkistakaa RN-versionne ennen sen käyttöä vanhemmissa projekteissa.

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: Lasten rivitys seuraaville riveille

Oletusarvoisesti Flex-lapset kutistuvat mahtuakseen yhdelle riville eivätkä koskaan rivity. Asettakaa säilölle flexWrap: 'wrap', jotta lapset voivat siirtyä seuraavalle riville (row-suunnassa) tai seuraavaan sarakkeeseen (column-suunnassa), kun tila loppuu. Tämä on perusta tunnistepilville, prosenttileveyksiä käyttäville ruudukkomaisille asetteluille ja kaikille käyttöliittymille, joissa kohteiden pitäisi siirtyä luontevasti seuraavalle riville. 'nowrap' on oletus; 'wrap-reverse' rivittää vastakkaiseen suuntaan.

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

Käytännöllinen otsakeasettelu

Soveltakaa Flexbox-osaamistanne yleiseen mobiilisovellusten rakenteeseen: navigointiosoitteeseen, jossa vasemmalla on paluupainike, keskellä otsikko ja oikealla valikkokuvake. Käyttäkää otsakesäilössä arvoja flexDirection: 'row' ja alignItems: 'center'. Antakaa otsikolle flex: 1, jotta se laajenee täyttämään jäljelle jäävän tilan ja keskittää itsensä kiinteän levyisten sivukuvakkeiden väliin. Tämä on siistimpi ratkaisu kuin position: 'absolute' -arvon käyttäminen keskitykseen, ja se käsittelee eripituiset otsikot oikein.

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

Flexbox-asettelujen virheenkorjaus

Flexbox-virheet ovat yleisiä asettelun kehityksen aikana. Hyödyllisiä virheenkorjaustekniikoita ovat seuraavat: lisätkää kuhunkin View-komponenttiin väliaikainen backgroundColor, jotta sen rajat näkyvät; käyttäkää React DevToolsia lasketun asettelun tutkimiseen komponenttipuussa; tarkistakaa, puuttuuko esi-isäsäilöiltä flex: 1 (säilö, jolla ei ole flex: 1 -arvoa, kutistuu nollakorkuiseksi, jolloin sen lapset eivät näy); ja varmistakaa, että flexDirection on haluamanne arvo (muistakaa, että React Nativen oletus on column, ei row). Kaikkien tyylien poistaminen ja lisääminen takaisin yksi kerrallaan on luotettava tapa rajata asetteluvirheiden syy.

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

Rivi, jossa on kuvake, teksti ja toiminto

Yksi yleisimmistä mobiilikäyttöliittymien rakenteista on luettelorivi, jossa vasemmalla on kuvake, keskellä teksti ja oikealla toimintopainike. Toteuttakaa se käyttämällä säilössä flexDirection: 'row' -arvoa, kaikkien lasten pystysuuntaiseen kohdistamiseen alignItems: 'center' -arvoa, vasemmalla kiinteän kokoista kuvake-View-komponenttia, keskellä flex: 1 -tekstialuetta (jotta se laajenee täyttämään käytettävissä olevan tilan) ja oikealla kiinteän kokoista toimintopainiketta. Tätä rakennetta käytetään asetuksissa, yhteystietoluetteloissa ja kaikissa mobiilisovellusten tietorikkaissa taulukkonäkymissä.

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

Pikatarkistus

Testatkaa, kuinka hyvin ymmärrätte tässä oppitunnissa käsitellyt React Native -mobiilikehityksen käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte, että flexDirection määrittää pääakselin (React Nativessa oletusarvo on sarake, ei rivi), justifyContent jakaa alielementit pääakselin suuntaisesti ja alignItems kohdistaa alielementit poikittaisakselilla. Seuraavaksi tutustumme flex-ominaisuuteen ja responsiiviseen koon määritykseen eri näyttöko’oissa.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
30
Oppitunnit
120
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Flexboxin suunta, justifyContent ja alignItems” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Flexboxin suunta, justifyContent ja alignItems”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Flexboxin suunta, justifyContent ja alignItems”?

Ohjatkaa View-komponentin lasten sijoittelua flexDirection-, justifyContent- ja alignItems-ominaisuuksilla keskittämällä, jakamalla tilaa ja tasaamalla elementtejä. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Flexboxin suunta, justifyContent ja alignItems”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. StyleSheet.create ja rivinsisäiset tyylit
  2. Flexboxin suunta, justifyContent ja alignItems
  3. flex, flexGrow ja responsiivinen mitoitus
  4. Responsiivisen korttiruudukon rakentaminen
← Takaisin: React Native Academy