kekuatan Flexbox yang luar biasa

Sep 14, 2025
Bagaimana caranya

Flexbox, atau tata letak kotak fleksibel, adalah modul tata letak CSS yang kuat yang memberikan perancang web dan pengembang cara yang efisien dan sederhana untuk meletakkan, menyelaraskan, dan mendistribusikan elemen dalam wadah. Ini memecahkan banyak masalah tata letak yang telah kita perjuangkan untuk dipecahkan untuk waktu yang lama.

Dasar-Dasar FlexBox.

Dalam bentuknya yang paling mendasar, Flexbox terdiri dari dua elemen: wadah fleksibel (atau parent fleksibel) dan item flex (anak-anak Flex). Wadah fleksibel adalah elemen yang mengandung (seperti a jaman ) Mengingat properti tampilan melenturkan . Item Flex adalah elemen anak dari wadah fleksibel, yang dapat dimanipulasi melalui berbagai properti tampilan.

Wadah Flex dan item Flex masing-masing memiliki rentang properti sendiri yang dapat digabungkan dengan cara yang berbeda untuk membuat berbagai tata letak kompleks. Barang-barang di dalam wadah fleksibel dapat ditata secara horizontal atau vertikal, selaras dan didistribusikan dengan berbagai cara, dan diregangkan atau menyusut agar sesuai dengan ruang yang tersedia. Semua opsi ini memungkinkan Anda dengan mudah membuat tata letak yang responsif.

Cara Menggunakan Flexbox

Untuk mulai menggunakan FlexBox, Anda harus terlebih dahulu membuat wadah fleksibel Anda (elemen induk yang akan berisi item Flex Anda). Dalam contoh ini, kami akan menggunakan jaman blok. Sebelum kita menata elemen, mari kita tambahkan tiga lagi jaman Blok-blok di dalam wadah fleksibel kami untuk bertindak sebagai item flex. Pada titik ini, barang-barang akan ditumpuk.

Dengan anak kami divs di tempat, kita dapat mengatur properti tampilan penginapan penginapan melenturkan . 

 wadah fleksibel {
Tampilan: Flex;
}

Petunjuk Layout.

Arah tata letak hanyalah arah elemen Anda akan mendistribusikan diri mereka sendiri. Arah default dari wadah fleksibel adalah baris , yang akan menampilkan elemen anak secara horizontal. Anda dapat mengganti tata letak ke vertikal dengan mengatur arah ke kolom . 

 wadah fleksibel {
Tampilan: Flex;
arah fleksibel: baris;
}

Wadah fleksibel {
Tampilan: Flex;
Flex-Direction: kolom;
}

Arah mana pun yang Anda tetapkan pada wadah flex Anda disebut sebagai arah 'utama', sedangkan arah lain yang tidak Anda pilih menjadi arah 'lintas'. Jadi, secara default, arah utamanya akan horizontal dan arah silang akan vertikal.

FlexBox juga memungkinkan Anda membalikkan tata letak. Ketika dibalik, anak-anak dari wadah fleksibel akan ditata kanan ke kiri (jika arahnya baris ) atau bagian bawah ke atas (jika arahnya kolom ). 

 wadah fleksibel {
Tampilan: Flex;
Arah fleksibel: Baris balik;
}

Wadah fleksibel {
Tampilan: Flex;
Flex-Direction: Column-Reverse;
}

Ini bisa berguna jika Anda ingin membalik tata letak pada layar yang lebih kecil.

Misalnya, katakanlah pada layar desktop yang ingin Anda tampilkan teks di sisi kiri layar dan gambar di sebelah kanan (lihat gambar papan selancar di atas). Pada ponsel, ini akan memindahkan gambar di bawah teks. Dengan membalikkan arah, Anda dapat memastikan bahwa gambar muncul di atas teks sebagai gantinya.

Sesuaikan Alignment.

Pengaturan FlexBox juga memberi Anda dua metode berbeda untuk menyelaraskan konten: secara vertikal dan horizontal. Berikut adalah opsi penyelarasan horizontal Anda untuk item di dalam wadah fleksibel:

Flex-Mulai : Item diatur ke arah awal baris (kiri, kecuali Anda telah membalikkan tata letak)

pusat : Item yang terpusat di dalam baris

Flex-End. : Item diatur ke ujung baris (kanan, kecuali Anda telah membalikkan tata letak)

ruang-antara. : Item didistribusikan secara merata di sepanjang baris

Space-sekitar : Item didistribusikan secara merata di sepanjang baris, dengan ruang yang sama di kedua sisi setiap elemen

Jadi kode mungkin terlihat seperti ini: 

 wadah fleksibel {
Tampilan: Flex;
arah fleksibel: baris;
SELURUH-KONTEN: FLEX-START | Flex-end | Pusat | Ruang-Antara | Space-sekitar | meregang;
}

Berikut adalah opsi pelurusan vertikal Anda untuk item dalam wadah fleksibel:

Flex-Mulai : Item selaras ke atas baris

pusat : Item dipusatkan dalam baris

Flex-End. : Item selaras ke bagian bawah baris

meregang : Item membentang di ketinggian baris

baseline. : Barang-barang selaras ke baseline mereka (garis imajiner yang teks duduk)

Kode mungkin terlihat seperti ini: 

 wadah fleksibel {
Tampilan: Flex;
arah fleksibel: baris;
Align-Item: Mulai Flex | Flex-end | Pusat | Baseline | meregang;
}

Secara default, anak-anak wadah flex akan selalu berusaha menyesuaikan pada satu baris. Jika Anda ingin mengubahnya, Anda dapat menambahkan membungkus atribut. Ini memungkinkan anak-anak untuk membungkus garis baru jika kehabisan ruang. 

 wadah fleksibel {
Tampilan: Flex;
Flex-Wrap: Bungkus;
}

Item Flex juga mendapatkan properti berbasis flex mereka sendiri. Ketika suatu elemen ditempatkan di dalam wadah fleksibel, secara otomatis menjadi anak flex, dan diberikan set gaya CSS berbasis fleksibel sendiri. Gaya ini mengontrol ukuran, penyelarasan, dan urutan tampilan.

Ukuran Flex.

Anak-anak Flex dapat mengubah lebar atau tinggi badannya (tergantung pada arah tata letak wadah) untuk mengisi ruang yang tersedia.

WebFlow memberi Anda tiga opsi preset untuk ukuran flex: menyusut jika diperlukan, mengisi ruang kosong, dan jangan menyusut. Perhatikan bahwa setiap elemen anak dapat memiliki pengaturannya sendiri, yang memungkinkan sejumlah besar opsi desain. 

 Barang Flex {
Flex-Susut: & LT; NUMBER & GT ;;
Flex-Grow: & LT; Number & GT ;;
Flex-basis: & lt; panjang & gt; | mobil;
}

Mari kita lihat apa yang dilakukan masing-masing opsi ini:

  • Kecilkan jika diperlukan: Ukuran item berdasarkan lebar / tinggi atau kontennya. Item tidak akan tumbuh lebih besar dari yang dibutuhkan, tetapi dapat menyusut ke ukuran minimum untuk mencegah overflow
  • Isi ruang kosong: Memungkinkan item untuk memperluas untuk mengisi semua ruang yang tersedia di dalam induknya. Jika Anda mengatur ini pada semua item dalam wadah fleksibel, mereka akan memperluas untuk mengambil jumlah ruang kosong yang sama
  • Jangan menyusut: Ukuran item berdasarkan lebar / tinggi atau kontennya, tetapi tidak memungkinkannya untuk menyusut, bahkan jika itu akan menyebabkan overflow

Item Flex juga dapat memiliki pengaturan keselarasan sendiri, yang menimpa penyelarasan default yang ditetapkan oleh wadah Flex Parent mereka. Keberpihakan ini berperilaku seperti yang dijelaskan sebelumnya. 

 Barang Flex {
Tampilan: Flex;
arah fleksibel: baris;
Align-Item: Mulai Flex | Flex-end | Pusat | Baseline | meregang;
}

Secara default, menampilkan item Flex dalam urutan yang sama dengan yang muncul dalam kode sumber. Dengan FlexBox, Anda dapat mengesampingkan perilaku ini untuk memastikan elemen ditampilkan dalam urutan yang Anda inginkan.

Empat opsi utama yang dapat Anda gunakan di sini:

  • Mobil : Nilai default, yang memesan item saat mereka berada di sumbernya
  • Pertama : Barang muncul terlebih dahulu dalam wadah flex
  • Terakhir : Item muncul terakhir dalam wadah fleksibel
  • Adat : Anda dapat menyesuaikan pesanan, item Anda akan ditampilkan di

Pesanan khusus dapat didefinisikan sebagai angka, yang menentukan urutan item Flex muncul di dalam wadah fleksibel. 

 Barang Flex {
Pesan: & lt; integer & gt ;;
}

Mengapa saya harus menggunakannya?

Saya senang Anda bertanya! Menggunakan FlexBox memungkinkan Anda untuk dengan mudah membuat tata letak responsif yang dulunya sangat sulit (atau tidak mungkin) untuk dibuat dengan modul tata letak CSS yang lebih lama.

Lihatlah contoh-contoh dalam gambar di bawah ini - banyak yang Anda mungkin sudah melihat di seluruh web. Hampir semua dari mereka akan mengambil sejumlah besar CSS (terutama di berbagai ukuran layar), tetapi hanya mengambil beberapa garis sederhana untuk dicapai dengan FlexBox. Untuk melihat contoh-contoh ini beraksi, kunjungi FlexBox.webflow.com .

Bagaimana caranya - Artikel Terpopuler

Cara menggambar seekor burung

Bagaimana caranya Sep 14, 2025

Mempelajari cara menggambar seekor burung bisa menjadi hobi yang brilian. Jika Anda ingin mengasah keterampilan menggambar Anda, atau berpikir untuk mengam..

Apa yang ada di dalam Angular 8?

Bagaimana caranya Sep 14, 2025

(Kredit Gambar: Masa Depan) Angular 8 adalah versi terbaru dari Angular Google - salah satu Kerangka JavaScri..

Buat adegan dengan Renderman untuk Maya

Bagaimana caranya Sep 14, 2025

(Kredit Gambar: Jeremy Heintz) Dalam renderman ini untuk tutorial Maya, kami akan membahas berbagai topik mulai dari ..

Jadikan aplikasi Anda offline dengan pekerja layanan

Bagaimana caranya Sep 14, 2025

Halaman 1 dari 2: Halaman 1: Pemuatan Lebih Cepat Halaman 1: Pemuatan Leb..

Cara merigasikan wajah untuk animasi

Bagaimana caranya Sep 14, 2025

Ketika saya pertama kali belajar untuk membuat rig karakter di Maya Way kembali pada tahun 2002 saat bekerja pada playstation 2 t..

Cara Membuat Adegan Ruang Fotorealistik

Bagaimana caranya Sep 14, 2025

Ingin tahu cara membuat fly-through arsitektur 3D yang realistis tetapi tidak yakin di mana harus memfokuskan upaya Anda dalam pi..

cache di booster kinerja BBC

Bagaimana caranya Sep 14, 2025

Tahun lalu selama sesi pengujian pengguna untuk aplikasi BBC News, salah satu pengguna membuat komentar yang benar-benar terjebak..

Cara melukis zombie dalam cat studio klip

Bagaimana caranya Sep 14, 2025

Dalam tutorial menggambar ini, Anda akan belajar Cara menggambar dan melukis sebuah zombie menggunakannya ..

Kategori