CSS Flexbox #1. Membuat Tata Letak Flexbox Pertama Anda

Di akhir tahun 2018, kami menerbitkan buku tentang CSS Grid, alat tata letak yang merevolusi desain web frontend. CSS Grid sepenuhnya asli CSS dan memungkinkan Anda untuk membuat sistem tata letak berbasis grid, menggunakan kolom dan baris.

"CSS Grid Explained" segera menjadi salah satu buku terlaris kami. Jadi kami sedang mengerjakan pembaruan dan perluasan besar-besaran untuk buku itu. Kami juga mulai memproduksi buku baru, "Flexbox Explained". Flexbox terkait erat dengan CSS Grid, tetapi ada perbedaan mencolok:

• Flexbox adalah model tata letak satu dimensi. Itu dapat mengelola kolom atau baris.
• CSS Grid adalah model tata letak dua dimensi. Itu dapat mengelola kolom dan baris.

Selama beberapa minggu ke depan, kami akan menerbitkan serangkaian tutorial Flexbox saat kami menulis "Flexbox Dijelaskan". Tutorial pertama ini mendemonstrasikan konsep dasar CSS Flexbox dengan contoh praktis.

Pengantar Flexbox

Spesifikasi Flexbox CSS menjelaskan tata letak dengan item ( flex-items ) di dalam wadah ( flex-container ). Barang-barang ini dapat tumbuh atau menyusut dalam lebar dan/atau tinggi, sesuai dengan ruang kontainer yang tersedia. Item "melenturkan" agar sesuai dengan wadah induk dengan cara terbaik.

Item "tertekuk" ini dapat diletakkan ke segala arah (sumbu sebaris atau sumbu blok), sehingga memberikan banyak fleksibilitas saat mengubah ukuran (lebar atau tinggi) layar atau orientasinya.

Anda bisa melihat spesifikasi Flexbox W3C dengan mengklik link ini.

Langkah 1. Buat HTMLnya

Mari kita mulai contoh ini dengan membuat file HTML dengan beberapa kode contoh. Saya telah menyiapkan beberapa HTML untuk Anda - ini adalah wadah dengan 3 elemen anak.

• Buka editor kode pilihan Anda.
• Buat file HTML kosong.
• Kunjungi halaman ini dan salin kode HTML
• Rekatkan kode itu di file HTML Anda.

Langkah 2. Buat CSSnya

Sekarang kita memiliki wadah dengan 3 elemen, mari tambahkan beberapa gaya.

• Buat file CSS bernama style.css. . Tempatkan file ini di folder yang sama dengan file HTML Anda. Tautan ke file CSS ini sudah ada di tag file HTML Anda
• Salin dan tempel kode ini, yang juga tersedia di Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Gambar ini menunjukkan bagaimana kode Anda akan muncul ketika Anda membuka file HTML di browser. 3 item anak selebar wadah induknya. Tingginya ditentukan oleh isi setiap item. Perhatikan padding 2rem (sekitar 32px pada layar desktop) di semua sisi.

Langkah #3. Gaya Flexbox CSS

Sekarang saatnya untuk memulai bagian Flexbox dari tutorial ini.

• Edit file CSS dan tambahkan kode ini:

 .container { display: flex; }

Gambar ini menunjukkan bagaimana kode Anda akan terlihat sekarang:

Apa yang telah berubah? Di sisi teknis, wadah induk sekarang menjadi flex-container . Elemen anak telah berubah menjadi flex-items .

Mengapa ukuran wadah berubah? flex-item tidak selebar wadah induknya. Mereka sekarang seluas konten di dalamnya. flex-items muncul sebagai elemen melayang ke kiri. Mereka berperilaku seperti elemen sebaris .

Untuk melihat dengan jelas lebar wadah induk, Anda dapat menerapkan background-color :

• Edit kode CSS dan tambahkan kode ini:

 .container { display: flex; background-color: #f5ca3c; }

Begini tampilan wadahnya sekarang:

Anda telah memperhatikan bahwa flex-container berperilaku (kebanyakan) seperti elemen level blok. Namun, kami juga membuat wadah berperilaku seperti elemen tingkat sebaris. Untuk melakukan ini, kami mengubah nilai properti display menjadi inline-flex .

• Mengedit kode CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

Wadah fleksibel sekarang menjadi elemen level inline, seperti yang Anda lihat di gambar ini:

Sebelum melanjutkan tutorial ini, mari ubah perilaku ke elemen level blok.

• Mengedit kode CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Langkah #4. Mengubah Baris Flexbox menjadi Kolom

Sejauh ini, kami telah membuat flex-container . Kami juga telah melihat bagaimana anak-anak dari wadah ini berperilaku ketika diubah menjadi flex-items .

Sekarang mari kita belajar bagaimana mengubah arah layout kita. Arah default flex-container berbasis baris. Namun, Anda dapat mengubah perilaku ini dengan properti flex-direction .

• Mengedit kode CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Setelah memperbarui kode Anda, Anda tidak akan melihat perubahan karena flex-direction: row adalah nilai default. Mari buat perubahan yang benar-benar terlihat: edit arah flex-container menjadi column .

• Mengedit kode CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Gambar berikut ini menunjukkan perubahan dalam tata letak Anda:

Sekarang arah flex-container didasarkan pada sumbu blok (kolom). flex-items disejajarkan dari atas ke bawah dan masing-masing item ini mengambil lebar penuh wadah induknya. Jadi, mereka berperilaku seperti elemen blok.

Sekarang, Anda mungkin mulai mempertanyakan beberapa hal pada titik ini: " Hei, tata letak saya sekarang terlihat persis sama dengan tata letak pertama dalam tutorial ini! " Itu benar. Secara visual, tidak ada perbedaan antara tata letak saat ini dengan wadah flex-container dan tata letak pertama dari contoh ini dengan wadah blok.

Namun, kami sekarang memiliki lebih banyak kendali. Misalnya, Anda dapat membalikkan arah flex-items dengan properti row-reverse dan column-reverse .

• Mengedit kode CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Gambar ini menunjukkan bagaimana tata letak Anda akan terlihat setelah pembaruan baru ini:

Untuk melihat flex-items terbalik berturut-turut, ubah nilai properti flex-direction .

• Mengedit kode CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Ringkasan Flexbox

Selamat! Anda telah mempelajari cara mendeklarasikan flex-container . Anda telah melihat bagaimana flex-items berperilaku tergantung pada flex-direction diterapkan ke wadah induknya ( row atau column ). Anda juga tahu cara membalik urutan flex-items .

Semua perubahan ini dilakukan dengan CSS, sehingga tidak akan mempengaruhi struktur markup HTML situs Anda. Itulah salah satu keuntungan menggunakan Flexbox. Pembalikan urutan flex-items hanyalah salah satu fitur dari modul CSS ini. Masih banyak lagi yang harus dipelajari tentang Flexbox, jadi lihat Bagian #2 dari tutorial ini dalam beberapa hari.

Lebih banyak tutorial dari seri ini

• CSS Flexbox #2. Cara Menggunakan Properti justify-content
• CSS Flexbox #3. Properti align-item
• CSS Flexbox #4. Properti flex-grow