flexbox

FUNGSI UTAMA DARI FLEXBOX

menyusun dan mengatur elemen-elemen (seperti div, gambar, atau teks) di dalam sebuah wadah (container) dengan cara yang mudah dan adaptif

cara menggunakan flexbox

Langkah 1: Bikin File HTML Dasar

• Buka editor kode dan buat file baru bernama index.html.
• Tulis kode HTML ini:

• Simpan file ini. Ini bikin kotak utama (container) dengan tiga kotak kecil (item) di dalamnya.

Langkah 2: Bikin File CSS untuk Styling

• Buat file baru bernama style.css di folder yang sama.
• Tulis kode CSS dasar dulu:

• Simpan file CSS. Sekarang buka index.html di browser – kamu lihat tiga kotak hijau tersusun vertikal (atas-bawah) kayak biasa.

Langkah 3: Aktifkan Flexbox di Container

• Tambah properti ini ke .container di style.css:

• Simpan dan refresh browser. Sekarang kotak-kotak tersusun baris (kiri-kanan) otomatis!

Langkah 4: Atur Posisi dan Jarak dengan Properti Flexbox

• Tambah properti ini ke .container untuk bikin lebih rapi:

• Simpan dan lihat hasilnya. Kotak-kotak sekarang di tengah container!
• Eksperimen: Ubah center jadi space-between (jarak merata antar kotak) atau flex-start (rata kiri). Atau tambah flex-direction: column; biar tersusun kolom (atas-bawah).

Langkah 5: Bikin Item Fleksibel dan Responsif

• Tambah properti ke .item:

• Simpan. Sekarang semua kotak lebarnya sama, meski isi teks beda.
• Tambah ke .container: flex-wrap: wrap; – ini bikin kotak “bungkus” ke baris baru kalau layar kecil (responsif kayak hp).

Langkah 6: Test dan Ubah-Ubah

• Buka di browser dan ubah ukuran jendela – lihat kotak menyesuaikan!
• Tambah lebih banyak item di HTML atau ubah warna di CSS. Kalau mau satu kotak lebih besar, kasih flex: 2; ke salah satu .item.
• Kalau error, cek kode typo atau lihat console browser (tekan F12).

praktekin cara ini di code.org devolopment lesson 12

seperti ini