Flexbox vs Twitter Bootstrap (veya benzer bir çerçeve) [kapalı]

Yakın zamanda Flexbox, en yüksek olana bağlı olarak div'leri aynı yükseklikte yapmak için bir çözüm aradığımı keşfettim .

Okudum aşağıdaki sayfayı CSS-tricks.com üzerinde ve beni ikna flexboxöğrenmek ve kullanmak çok güçlü bir modüldür. Ancak, Twitter Bootstrap'ın (ve benzer çerçevelerin) ızgara sistemleriyle aynı işlevleri (+ elbette çok fazla) sunduğunu da düşündürdü.

Şimdi sorular: Artıları ve eksileri flexboxnelerdir? Flexbox ile kişinin Bootstrap gibi bir çerçeveyle yapamayacağı bir şey var mı (elbette sadece ızgara sisteminden bahsediyor)? Bir web sitesine uygulandığında hangisi daha hızlı?

Sadece ızgara sistemi için, sadece kullanmak daha akıllı flexbox, ama zaten bir çerçeve kullanıyorsanız flexbox, ekleyebileceğiniz bir şey var mı?

flexboxBir çerçevenin "şebeke sistemini" seçmek için herhangi bir neden var mı?

Birkaç nedenden dolayı, flexbox önyüklemeden çok daha iyidir:

• Bootstrap, birçok kişinin web için uygun olmadığını söyleyeceği ızgara sistemini yapmak için şamandıralar kullanır; burada flex-box, öğelerin boyutuna ve içeriğine esnek kalarak tersini yapar; pikselleri em / rem ile kullanmakla aynı veya div'larınızı yalnızca kenar boşlukları ve dolgu kullanarak kontrol etmek ve önceden tanımlanmış bir boyut ayarlamak gibi.

• Bootstrap, float kullandığından, her satırdan sonra net düzeltmeye ihtiyaç duyar veya farklı yükseklikte yanlış hizalanmış div'ler alırsınız. Flex-box bunu yapmaz ve bunun yerine kaptaki en yüksek div değerini kontrol eder ve yüksekliğine yapışır.

Flex-box üzerinde bootstrap ile gidebilmemizin tek nedeni tarayıcı desteğinin olmaması (özellikle IE) (zaten ölüyor). Ve bazen her ikisi de aynı webkit motorunu kullanmasına rağmen Chrome ve Safari'den farklı davranışlar elde edersiniz.

Düzenle:

BTW karşılaştığınız tek sorun eşit yükseklik sütunlarıysa, bunun için birkaç çözüm var:

• display: tableEbeveyn display: table-cell;üzerinde, çocuk üzerinde kullanabilirsiniz . Bkz ekranda aynı yüksekliği elde etmek için? Tabloda hücreli

• Her div için mutlak konumlandırma kullanabilirsiniz:
  position: absolute; top: 0; bottom: 0;

• Ayrıca jquery / JS çözümü ve daha sonra eklemeye çalışacağım şu anda hatırlayamadığım başka bir çözüm var.

Düzenleme 2:

Ayrıca http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties adresini ziyaret edin , esnek kutunun nasıl çalıştığına ilişkin .

Düzenleme 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Düzenleme 4: https://caniuse.com/#feat=flexbox

Flexbox'ı kullanmam (bunu okudum ve harika görünüyor) ama bir Bootstrap ön uç geliştiriciyim. Son kararı vermeden önce Flexbox baskı sayfalarını test etmenizi öneririm. Bilirsiniz ... Bazen baskı stilleri korkunç bir baş ağrısıdır ve baskı formatlarını tasarlamam gerektiğinde Bootstrap bana çok yardımcı olur.

Korkarım CSS hileleriyle ilgili başka bir makaleyi kaçırdınız :

Not: Flexbox düzeni, bir uygulamanın bileşenleri ve küçük ölçekli mizanpajlar için en uygunken, Izgara düzeni daha büyük ölçekli mizanpajlar için tasarlanmıştır.

Bu, denemeyebileceğiniz anlamına gelmez, sadece iki kez düşünün. Ve hepsi sonunda istenen tarayıcı desteğine bağlıdır.