# Basic Layout Tutorial

Diterjemahkan dari [Wix Engineering Blog](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c)

## flexDirection <a href="#id-8189" id="id-8189"></a>

*`‘column’,’column-reverse’,’row’,’row-reverse’`*

Mendefinisikan arah axis utama dari item *component* yang berada di dalamnya.  Standar awalnya adalah `column`. Karena kebanyakan aplikasi mobile orientasinya vertikal.

![Tekan gambar untuk memperbesar](https://miro.medium.com/max/733/1*rA7IbuUsJWsx6evKAsabVw.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flexdirection)

## flex <a href="#id-954c" id="id-954c"></a>

`flex`akan mendefinisikan seberapa banyak tempat/ruang yang akan didapatkan dari suatu item. Kebanyakan, yang dibutuhkan adalah `flex: 1` untuk mendapatkan seluruh tinggi layar/screen. &#x20;

Ruang akan dibagi sesuai `flex` dari elemen di dalamnya. Contoh di bawah ini view merah, kuning, dan hijau adalah *child*  dari container yang memiliki `flex:1`

Yang merah dapat `flex:1` , kuning `flex:2`, dan hijau `flex:3`

1+2+3=6 yang artinya, merah dapat 1/6 dari total ruang; kuning 2/6; hijau 3/6.

![](https://miro.medium.com/max/733/1*PhCFmO5tYX_sZSyCd4vO3w.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flex)

## justifyContent <a href="#id-34ad" id="id-34ad"></a>

*`‘flex-start’,’flex-end’,’center’,’space-between’,’space-around’`*<br>

Menentukan **distribusi** child di sepanjang **main axis** yang telah didefinisikan oleh `flexDirection`. Istilah "justify" datang dari dunia percetakan. Garis [yang ada di artikel berita](https://www.ragesw.com/blog/wp-content/uploads/2016/06/justified.png) mengisi ruang dengan rata dan lurus pad marginnya.&#x20;

![](https://miro.medium.com/max/733/1*i5TVlme-TisAVvD5ax2yPA.png)

* Standarnya adalah `flex-start`

[Coba di Expo](https://snack.expo.io/@drorbiran/justifycontent)

## alignItems <a href="#id-298c" id="id-298c"></a>

*`‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’`*<br>

Menyesuaikan/meluruskan item sepanjang **cross** axis. Jadi, dalam view standard, ini akan mengontrol kelurusan item secara horizontal.

![](https://miro.medium.com/max/733/1*evkM7zfxt-9p-HJ1M0Bh2g.png)

* `stretch` tidak bekerja ketika `width` dari view sudah dispesifikasi.
* `flex-start` dan `flex-end` tidak akan mengerti apa yang harus dilakukan jika tidak ada spesifikasi `width`.

[Coba di Expo](https://snack.expo.io/@drorbiran/alignitems)

## alignSelf <a href="#a756" id="a756"></a>

*`‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’`*<br>

Meluruskan item dengan **corss axis** dan **menimpa** `alignItem` parent-nya.

![](https://miro.medium.com/max/733/1*J1JCoKwLCokX9JXVBvP71g.png)

&#x20;[Coba di Expo](https://snack.expo.io/@drorbiran/alignself)

## flexWrap <a href="#e449" id="e449"></a>

*`‘wrap’, ‘nowrap’`*

Mengatur apakah item flex dipaksa masuk ke dalam satu baris atau bisa dibungkus ke dalam beberapa baris.

![](https://miro.medium.com/max/733/1*_7v4uQhSsuCn1cfeOMVfrA.png)

* Nilai standarnya adalah `nowrap`

[Coba di Expo](https://snack.expo.io/@drorbiran/flexwrap)

## alignContent <a href="#b8b2" id="b8b2"></a>

*`‘flex-start’, ’center’, ’flex-end’, ’stretch’,’space-between’, ’space-around’`*

Ketika `flexWrap` ditentukan menjadi `flexWrap:'wrap'`, maka container memiliki beberapa baris item. Properti ini akan membantu untuk meluruskan baris cross-axis.

![](https://miro.medium.com/max/733/1*cC2XFyCF_igp20Ombt4wBw.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flexwrap)

## position <a href="#c99f" id="c99f"></a>

*`‘relative’, ’absolute’`*

Anggap container seperti orang berbaris. Dan tiap orang itu diperintahkan  untuk berdiri 5 meter di belakang orang depannya (`marginTop: 5`).&#x20;

Masing-masing orang tadi akan menaati barisan dan memosisikan dirinya relatif terhadap orang di depannya, jika diset `relative`.

JIka diset ke `absolute`, maka orang-orang tadi akan mengabaikan barisan dan memosisikan dirinya seolah barisan kosong 5 meter dari permualaan baris (parent container).

![](https://miro.medium.com/max/733/1*NlPeRQCQK3Vb5nyjL0Mqxw.png)

* Standar nilainya adalah `relative`

[Coba di Expo](https://snack.expo.io/@drorbiran/position)

## &#x20;zIndex

Component bisa diatur dimana tampilannya di atas mana. Di contoh ini,  `zIndex` dari kotak kuning adalah 1

![](https://miro.medium.com/max/733/1*NIB9XzbUT788FhKDYBqnKQ.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/position)

> Itulah 9 dasar props layout. Untuk lebih lanjut bisa cek <https://reactnative.dev/docs/layout-props>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://umar-rudy.gitbook.io/skema-tik/basic-layout-tutorial.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.