Cara kerja Flexbox - dijelaskan dengan gif animasi yang besar dan penuh warna

Flexbox berjanji untuk menyelamatkan kita dari kejahatan CSS biasa (seperti perataan vertikal).

Nah, Flexbox memang memenuhi tujuan itu. Tapi menguasai model mental barunya bisa jadi menantang.

Jadi mari kita lihat animasi tentang cara kerja Flexbox, sehingga kita dapat menggunakannya untuk membuat tata letak yang lebih baik.

Prinsip dasar Flexbox adalah membuat tata letak menjadi fleksibel dan intuitif.

Untuk mencapai hal ini, ini memungkinkan container memutuskan sendiri cara mendistribusikan anak mereka secara merata - termasuk ukuran dan ruang di antara mereka.

Ini semua terdengar bagus pada prinsipnya. Tapi mari kita lihat seperti apa dalam praktiknya.

Di artikel ini, kita akan membahas 5 properti Flexbox yang paling umum. Kami akan mengeksplorasi apa yang mereka lakukan, bagaimana Anda dapat menggunakannya, dan seperti apa hasil sebenarnya nantinya.

Properti # 1: Tampilan: Lentur

Inilah contoh halaman web kami:

Anda memiliki empat div berwarna dengan berbagai ukuran, yang disimpan dalam wadah div abu-abu. Saat ini, setiap div memiliki default display: block. Setiap persegi dengan demikian mengambil lebar penuh garisnya.

Untuk memulai Flexbox, Anda perlu membuat wadah Anda menjadi wadah fleksibel . Ini semudah:

#container { display: flex;}

Tidak banyak yang berubah - div Anda ditampilkan sebaris sekarang, tapi itu saja. Namun di balik layar, Anda telah melakukan sesuatu yang hebat. Anda memberi kotak Anda sesuatu yang disebut konteks fleksibel .

Anda sekarang dapat mulai memposisikannya dalam konteks itu, dengan kesulitan yang jauh lebih sedikit daripada CSS tradisional.

Properti # 2: Arah Lentur

Kontainer Flexbox memiliki dua sumbu: sumbu utama dan sumbu silang , yang defaultnya terlihat seperti ini:

Secara default, item disusun di sepanjang sumbu utama, dari kiri ke kanan . Inilah sebabnya mengapa kotak Anda menjadi garis horizontal setelah Anda menerapkannya display: flex.

Flex-direction, bagaimanapun, mari kita putar sumbu utama.

#container { display: flex; flex-direction: column;}

Ada perbedaan penting yang harus dibuat di sini: flex-direction: columntidak menyejajarkan kotak pada sumbu silang, bukan pada sumbu utama. Itu membuat sumbu utama itu sendiri berubah dari horizontal ke vertikal.

Ada beberapa opsi lain untuk flex-direction, juga: row-reverse dan column-reverse.

Properti # 3: Justifikasi Konten

Ratakan-konten mengontrol bagaimana Anda meratakan item pada sumbu utama.

Di sini, Anda akan menyelami sedikit lebih dalam tentang perbedaan sumbu utama / silang. Pertama, mari kembali ke flex-direction: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

Anda memiliki lima perintah yang dapat Anda gunakan untuk menggunakan justify-content :

  1. Mulai fleksibel
  2. Flex-end
  3. Pusat
  4. Spasi antar
  5. Luar angkasa

Ruang-sekitar dan ruang-antara adalah yang paling tidak intuitif. Spasi antar memberikan ruang yang sama antara setiap persegi, tetapi tidak antara persegi dan wadah.

Space-around menempatkan bantalan ruang yang sama di kedua sisi bujur sangkar - yang berarti jarak antara bujur sangkar terluar dan wadah adalah setengah dari jarak antara dua bujur sangkar (setiap bujur sangkar memberikan jumlah margin yang sama dan tidak tumpang tindih, sehingga menggandakan ruang).

Catatan terakhir: ingat bahwa justify-content bekerja di sepanjang sumbu utama , dan flex-direction mengganti sumbu utama . Ini akan menjadi penting saat Anda pindah ke…

Properti # 4: Menyelaraskan Item

Jika Anda 'mendapatkan' justify-content, menyelaraskan-item akan sangat mudah.

Karena konten-justify bekerja di sepanjang sumbu utama, align-item diterapkan pada sumbu silang.

Mari atur ulang flex-direction kita menjadi row, sehingga sumbu kita terlihat sama seperti gambar di atas.

Kemudian, mari selami perintah align-item.

  1. mulai fleksibel
  2. flex-end
  3. pusat
  4. meregang
  5. baseline

Tiga yang pertama persis sama dengan justify-content , jadi tidak ada yang terlalu mewah di sini.

Namun, dua yang berikutnya sedikit berbeda.

Anda memiliki peregangan, di mana item mengambil keseluruhan dari sumbu silang, dan garis dasar, di mana bagian bawah tag paragraf sejajar.

(Perhatikan bahwa untuk align-items: stretch, saya harus menyetel tinggi kotak ke otomatis. Jika tidak, properti ketinggian akan menimpa peregangan.)

Sebagai garis dasar, ketahuilah bahwa jika Anda menghilangkan tag paragraf, itu meratakan bagian bawah kotak, seperti:

Untuk mendemonstrasikan sumbu utama dan sumbu silang dengan lebih baik, mari kombinasikan justify-content dan align-items dan lihat bagaimana pemusatan bekerja berbeda untuk dua perintah arah-fleksibel:

Dengan baris, kotak diatur sepanjang sumbu utama horizontal. Dengan kolom, mereka berada di sepanjang sumbu utama vertikal.

Bahkan jika kotak dipusatkan secara vertikal dan horizontal dalam kedua kasus, keduanya tidak dapat dipertukarkan!

Properti # 5: Sejajarkan Diri

Align-self memungkinkan Anda memanipulasi penyelarasan satu elemen tertentu secara manual.

Ini pada dasarnya menimpa item-item sejajar untuk satu persegi. Semua propertinya sama, meskipun defaultnya adalah auto , yang mengikuti align-item dari penampung.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Mari kita lihat seperti apa ini. Anda akan menerapkan align-self ke dua kotak, dan sisanya menerapkan align-items: centerdan flex-direction: row.

Kesimpulan

Meskipun kami baru saja menggores permukaan Flexbox, perintah ini seharusnya cukup bagi Anda untuk menangani sebagian besar penyelarasan dasar - dan untuk menyelaraskan secara vertikal dengan isi hati Anda.

Jika Anda ingin melihat lebih banyak tutorial GIF Flexbox, atau jika tutorial ini bermanfaat bagi Anda, tekan hati hijau di bawah atau tinggalkan komentar.

Terima kasih sudah membaca!