1
00:00:02,560 --> 00:00:08,680
Untuk memusatkan konten di tengah, kita dapat menggunakan teknik yang sudah saya bahas sebelumnya,

2
00:00:08,710 --> 00:00:11,500
menata gaya dan secara khusus, flexbox.

3
00:00:11,500 --> 00:00:17,470
Jadi pada modal kita, kita memiliki pandangan itu atau dalam modal kita, kita memiliki pandangan itu, itulah pandangan root kita,

4
00:00:17,500 --> 00:00:19,400
itu satu-satunya elemen dalam modal itu

5
00:00:19,420 --> 00:00:25,090
dan kemudian pandangan ini tentu saja memiliki elemen anak lain tetapi itulah satu-satunya anak langsung dari modal kita.

6
00:00:25,180 --> 00:00:29,310
Di sana, kami memiliki gaya wadah masukan yang kami terapkan dan di sana, kami saat ini

7
00:00:29,350 --> 00:00:30,490
menetapkan arah fleksibel baris.

8
00:00:30,490 --> 00:00:35,170
Sekarang tentu saja kita bisa meninggalkan itu tetapi saya akan mengatakan dalam modal jika kita menyajikannya

9
00:00:35,620 --> 00:00:41,230
pada layar penuh seperti ini, saya sebenarnya baik-baik saja dengan orientasi vertikal sehingga kita memiliki input dan di bawahnya, tombol.

10
00:00:41,610 --> 00:00:48,250
Jadi saya akan mengubah ini kembali ke kolom atau karena ini adalah default, cukup hapus arah flex

11
00:00:48,250 --> 00:00:52,580
ini dan sekarang saya ingin memusatkan ini secara horizontal dan vertikal

12
00:00:52,810 --> 00:00:59,480
dan untuk itu, kita dapat mengatur justifikasi konten ke pusat di sini dan menyelaraskan item ke pusat tetapi

13
00:00:59,680 --> 00:01:01,690
itu saja tidak akan berhasil.

14
00:01:01,780 --> 00:01:05,710
Anda dapat melihat apakah Anda membuka modal, itu masih jauh

15
00:01:05,800 --> 00:01:07,920
di atas dan alasannya

16
00:01:07,930 --> 00:01:14,080
adalah bahwa wadah input kami, sehingga pandangan kami menetapkan gaya ini, secara default tidak mengambil ruang

17
00:01:14,080 --> 00:01:16,720
yang tersedia penuh itu bisa di tampilan

18
00:01:16,720 --> 00:01:22,450
sekitarnya, jadi dalam hal ini di ibukota. Modal secara teoritis mengambil tinggi dan lebar penuh layar

19
00:01:22,480 --> 00:01:25,480
tetapi tampilan tidak mengambil ruang penuh yang tersedia secara

20
00:01:25,480 --> 00:01:26,560
default, itu

21
00:01:26,560 --> 00:01:28,630
hanya cara kerjanya, itulah pengaturan default.

22
00:01:28,630 --> 00:01:31,900
Hanya membutuhkan ruang yang dibutuhkan anak-anak, jadi input

23
00:01:31,900 --> 00:01:33,590
teks dan tombol.

24
00:01:33,730 --> 00:01:38,830
Jadi tampilan pada dasarnya memiliki tinggi input teks dan tombol digabungkan dan

25
00:01:38,980 --> 00:01:47,420
kemudian juga lebar anak terluas dalam hal ini, jadi dari input teks di sini dan omong-omong di sini, Android

26
00:01:47,420 --> 00:01:51,940
hanya tidak memperbarui dengan benar itu sebabnya Anda melihat

27
00:01:51,940 --> 00:02:02,010
ini output aneh di sini, Anda dapat mengabaikannya untuk saat ini. Jadi untuk membuat tampilan mengambil ruang penuh yang tersedia di sini, Anda cukup pergi ke gaya yang

28
00:02:02,010 --> 00:02:04,320
Anda terapkan ke tampilan, dalam hal ini

29
00:02:04,320 --> 00:02:11,670
gaya wadah masukan kami di sini dan atur flex ke yang di sini. Flex adalah properti yang digunakan bersamaan dengan flexbox dan seperti

30
00:02:12,120 --> 00:02:18,270
yang Anda pelajari sebelumnya dalam modul ini, dalam kuliah flexbox tambahan ini, flex memungkinkan Anda untuk

31
00:02:18,480 --> 00:02:25,140
mengontrol seberapa banyak ruang yang digunakan berbagai item di dalam kotak flexbox dan jika itu satu-satunya item, ini

32
00:02:25,140 --> 00:02:26,430
cukup memastikan

33
00:02:26,430 --> 00:02:29,970
bahwa wadah ini akan mengambil semua ruang yang tersedia.

34
00:02:29,970 --> 00:02:34,980
Anda juga dapat mengatur ini untuk melenturkan dua, nilai yang tepat tidak masalah di sini jika hanya anak

35
00:02:34,980 --> 00:02:39,570
itu, tetapi Anda perlu mengatur fleksibel untuk memastikan bahwa ini membutuhkan ruang penuh yang tersedia.

36
00:02:39,600 --> 00:02:44,160
Jika Anda tidak melakukannya, itu hanya akan mengambil ruang sebanyak elemen anak-nya, jika Anda

37
00:02:44,280 --> 00:02:48,850
mengatur flex, itu akan mengambil ruang sebanyak yang diberikan oleh elemen induknya, sehingga sebagai

38
00:02:48,900 --> 00:02:50,720
elemen induk dari pandangan

39
00:02:50,730 --> 00:02:52,990
itu, modal dalam hal ini memberikan tampilan.

40
00:02:53,340 --> 00:03:00,650
Jadi dengan flex yang ditambahkan di sini, jika Anda sekarang menyimpan ini, di iOS, Anda melihat sekarang ini terpusat dengan baik dan

41
00:03:00,670 --> 00:03:05,860
juga melihat ini di Android, apa yang dapat Anda lakukan adalah Anda dapat membuka pengalih tugas,

42
00:03:06,070 --> 00:03:08,210
tutup aplikasi ini di sini

43
00:03:08,320 --> 00:03:11,890
dan tekan a di sini untuk memulai kembali aplikasi ini di

44
00:03:11,890 --> 00:03:19,970
Android, tidak seperti modalnya dan sekarang di sini, Anda juga melihat itu. Sekarang penyesuaian kecil adalah sedikit jarak antara tombol dan input yang ingin

45
00:03:20,000 --> 00:03:22,140
saya miliki dan untuk itu, saya

46
00:03:22,250 --> 00:03:30,530
akan pergi ke input dan menambahkan margin bawah 10 di sini tetapi dengan itu, saya cukup senang tentang itu sekali lagi, sayangnya Android benar-benar

47
00:03:30,530 --> 00:03:35,380
memiliki beberapa masalah di sini dengan modal saya, jadi mari kita tutup dan lihat

48
00:03:39,120 --> 00:03:40,430
apakah itu terlihat

49
00:03:40,440 --> 00:03:42,000
bagus, ya ini bagus.

50
00:03:42,000 --> 00:03:47,430
Sekarang saya ingin memastikan bahwa ketika kita klik add di sini, kita sekarang benar-benar menutup modal.