Flexbox vs Twitter Bootstrap (atau kerangka kerja serupa) [ditutup]

Saya baru-baru ini menemukan Flexboxketika saya sedang mencari solusi untuk membuat divs hight yang sama, tergantung pada yang tertinggi.

Saya telah membaca halaman berikut tentang CSS-tricks.com dan meyakinkan saya bahwa itu flexboxadalah modul yang sangat kuat untuk dipelajari dan digunakan. Namun, itu juga membuat saya berpikir tentang fakta bahwa Twitter Bootstrap (dan kerangka kerja serupa) menawarkan jenis fungsi yang sama (+ tentu saja jauh lebih banyak) dengan sistem grid mereka.

Sekarang, pertanyaannya adalah: Apa pro dan kontra dari flexbox? Apakah ada sesuatu yang tidak bisa dilakukan dengan Flexbox yang bisa dilakukan dengan kerangka kerja seperti Bootstrap (tentu saja murni berbicara tentang sistem grid)? Manakah yang lebih cepat ketika diterapkan di situs web?

Saya menduga ketika hanya untuk sistem grid, itu lebih pintar untuk digunakan secara murni flexbox, tetapi bagaimana jika Anda sudah menggunakan kerangka kerja, apakah ada sesuatu yang flexboxbisa ditambahkan?

Apakah ada alasan untuk memilih flexbox"sistem grid" daripada kerangka kerja?

Untuk beberapa alasan, flexbox jauh lebih baik daripada bootstrap:

• Bootstrap menggunakan pelampung untuk membuat sistem grid, yang banyak orang akan katakan tidak dimaksudkan untuk web, di mana flex-box melakukan yang sebaliknya dengan tetap fleksibel terhadap ukuran dan isi item; perbedaan yang sama seperti menggunakan piksel vs em / rem, atau seperti mengendalikan div Anda hanya menggunakan margin dan padding dan tidak pernah menetapkan ukuran yang ditentukan sebelumnya.

• Bootstrap, karena menggunakan pelampung, membutuhkan perbaikan yang jelas setelah setiap baris, atau Anda akan mendapatkan div yang selaras dengan ketinggian yang berbeda. Flex-box tidak melakukan itu dan sebagai gantinya memeriksa div tertinggi dalam wadah dan menempel pada ketinggiannya.

Satu-satunya alasan saya akan menggunakan bootstrap melalui flex-box adalah kurangnya dukungan browser (terutama IE) (sudah mati). Dan terkadang Anda mendapatkan perilaku yang berbeda dari Chrome dan Safari meskipun keduanya menggunakan mesin webkit yang sama.

Edit:

BTW jika satu-satunya masalah yang Anda hadapi adalah kolom ketinggian yang sama, ada beberapa solusi untuk itu:

• Anda dapat menggunakannya display: tablepada orang tua, dan display: table-cell;pada anak. Lihat Cara mendapatkan ketinggian yang sama di layar: sel tabel

• Anda dapat menggunakan penentuan posisi absolut pada setiap div:
  position: absolute; top: 0; bottom: 0;

• Ada juga solusi jquery / JS, dan solusi lain yang tidak dapat saya ingat saat ini yang akan saya coba tambahkan nanti.

Edit 2:

Juga periksa http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties tentang cara kerja kotak-flex.

Sunting 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Edit 4: https://caniuse.com/#feat=flexbox

Saya belum pernah menggunakan Flexbox (saya telah membaca tentang hal itu dan tampaknya hebat) tapi saya seorang pengembang Bootstrap. Saya sarankan Anda menguji halaman pencetakan Flexbox sebelum membuat keputusan akhir. Anda tahu ... Kadang-kadang gaya pencetakan adalah sakit kepala yang mengerikan dan Bootstrap banyak membantu saya ketika saya harus merancang format cetak.

Saya khawatir Anda melewatkan artikel lain tentang trik CSS :

Catatan: Tata letak Flexbox paling sesuai untuk komponen aplikasi, dan tata letak skala kecil, sedangkan tata letak Kotak ditujukan untuk tata letak skala yang lebih besar.

Tidak berarti, Anda tidak boleh mencoba, tetapi hanya berpikir dua kali. Dan semua tergantung pada dukungan browser yang diinginkan pada akhirnya.