Daftar Isi:

Apa itu wadah Flexbox?
Apa itu wadah Flexbox?

Video: Apa itu wadah Flexbox?

Video: Apa itu wadah Flexbox?
Video: Flexbox Tutorial - 1 - Introduction 2024, Mungkin
Anonim

A wadah fleksibel memperluas item untuk mengisi ruang kosong yang tersedia atau mengecilkannya untuk mencegah luapan. Yang terpenting, kotak fleksibel tata letak adalah arah-agnostik yang bertentangan dengan tata letak biasa (blok yang berbasis vertikal dan inline yang berbasis horizontal).

Sehubungan dengan ini, bagaimana Anda menggunakan Flexbox?

Ringkasan

  1. Gunakan tampilan: fleksibel; untuk membuat wadah fleksibel.
  2. Gunakan justify-content untuk menentukan perataan horizontal item.
  3. Gunakan align-item untuk menentukan perataan vertikal item.
  4. Gunakan flex-direction jika Anda membutuhkan kolom, bukan baris.
  5. Gunakan nilai baris-terbalik atau kolom-terbalik untuk membalik urutan item.

bagaimana Anda membuat wadah Flex? Sebelum Anda dapat menggunakan apapun kotak fleksibel properti, Anda perlu mendefinisikan a wadah fleksibel dalam tata letak Anda. Anda buat wadah fleksibel dengan menyetel properti tampilan suatu elemen ke salah satu dari kotak fleksibel nilai tata letak: melenturkan atau sebaris- melenturkan . Secara default, melenturkan item diletakkan secara horizontal pada sumbu utama dari kiri ke kanan.

Dengan cara ini, untuk apa Flexbox digunakan?

kotak fleksibel adalah model tata letak yang memungkinkan elemen untuk menyelaraskan dan mendistribusikan ruang dalam wadah. Menggunakan lebar dan tinggi yang fleksibel, elemen dapat disejajarkan untuk mengisi ruang atau mendistribusikan ruang antar elemen, yang menjadikannya alat yang hebat untuk digunakan untuk sistem desain responsif.

Apa orientasi default dalam wadah Flex?

NS bawaan pengaturan setelah menerapkan tampilan: melenturkan adalah untuk item yang akan diatur sepanjang sumbu utama dari kiri ke kanan. Animasi di bawah ini menunjukkan apa yang terjadi ketika melenturkan - arah : kolom ditambahkan ke wadah elemen. Anda juga bisa atur fleksibel - arah untuk baris-terbalik dan kolom-terbalik.

Direkomendasikan: