Flexbox

Flexbox adalah model tata letak CSS yang memungkinkan penataan elemen-elemen di dalam suatu kontainer secara fleksibel dan responsif. Dengan menggunakan Flexbox, Anda dapat menata elemen-elemen dalam baris atau kolom, serta mengatur jarak antar elemen tanpa banyak usaha.

Istilah-Istilah di Flexbox:

• Main Axis: Sumbu utama di mana elemen-elemen akan diatur (secara default horizontal).
• Cross Axis: Sumbu yang tegak lurus terhadap main axis (secara default vertikal).
• Flex-wrap: Mengatur apakah elemen-elemen harus membungkus ke baris atau kolom berikutnya jika tidak ada cukup ruang.
• Flex-direction: Mengatur arah penataan elemen (row, column, dan variasinya).
• Justify-content: Menyusun elemen-elemen di sepanjang main axis.
• Align-items: Menyusun elemen-elemen di sepanjang cross axis.

Latihan 1: Flex Wrap

Pada latihan pertama ini, Anda akan belajar tentang flex-wrap. Properti ini mengatur apakah elemen-elemen dalam flex container akan membungkus (wrap) ke baris atau kolom baru ketika ruang yang tersedia tidak cukup.

HTML Code :

CSS Code :

Preview:

Penjelasan:

• Properti flex-wrap: wrap-reverse membuat elemen-elemen membungkus ke baris baru dalam urutan terbalik.
• Cobalah untuk mengganti wrap-reverse dengan wrap atau nowrap untuk melihat perbedaan efeknya.

Latihan 2: Flex Direction

Latihan ini mengajarkan tentang properti flex-direction. Properti ini mengontrol arah penataan elemen-elemen di dalam kontainer Flexbox. Secara default, elemen-elemen disusun dalam baris (row), tetapi Anda dapat mengubahnya menjadi kolom (column) atau variasi lainnya.

HTML Code :

CSS Code:

Preview:

Penjelasan:

• flex-direction: row mengatur elemen-elemen dalam baris (secara horizontal).
• Cobalah untuk mengubahnya menjadi row-reverse, column, atau column-reverse dan lihat bagaimana posisi elemen berubah.

Latihan 3: Justify Content

Pada latihan ini, Anda akan menggunakan properti justify-content untuk mengatur distribusi elemen-elemen sepanjang main axis. Properti ini mengontrol ruang antar elemen di sepanjang sumbu utama.

HTML Code):

CSS Code:

Preview:

Penjelasan:

• justify-content: space-evenly akan mendistribusikan elemen dengan jarak yang sama.
• Cobalah menggunakan nilai lain seperti flex-start, center, space-between, atau space-around untuk melihat perbedaannya.

Latihan 4: Align Items

Latihan ini mengajarkan tentang properti align-items, yang mengontrol penyusunan elemen-elemen di sepanjang cross axis (vertikal, secara default).

HTML Code:

CSS Code:

Preview:

Penjelasan:

• align-items: center akan menyusun elemen secara vertikal di tengah kontainer.
• Cobalah menggunakan nilai lain seperti flex-start, flex-end, stretch, dan center untuk melihat perbedaannya.