Flexbox vs Twitter Bootstrap (o framework simile) [chiuso]

Di recente ho scoperto Flexboxquando stavo cercando una soluzione per rendere i div la stessa altezza, a seconda di quello più alto.

Ho letto la seguente pagina su CSS-tricks.com e mi ha convinto che flexboxè un modulo molto potente da imparare e usare. Tuttavia, mi ha anche fatto riflettere sul fatto che Twitter Bootstrap (e framework simili) offrono le stesse funzioni (+ ovviamente molto di più) con i loro sistemi di griglia.

Ora, le domande sono: quali sono i pro ei contro flexbox? C'è qualcosa che non si può fare con Flexbox che si può fare con un framework come Bootstrap (ovviamente parlando semplicemente del sistema a griglia)? Quale è più veloce se implementato su un sito Web?

Immagino che solo per il sistema a griglia sia più semplice da usare flexbox, ma cosa succede se stai già utilizzando un framework, c'è qualcosa che flexboxpuò aggiungere?

Ci sono dei motivi per scegliere flexboxil "sistema di griglia" rispetto a un framework?

Per un paio di motivi, flexbox è molto meglio di bootstrap:

• Bootstrap usa i float per creare il sistema a griglia, che molti direbbero non è pensato per il web, dove flex-box fa il contrario rimanendo flessibile alle dimensioni e al contenuto degli oggetti; stessa differenza dell'utilizzo dei pixel rispetto a em / rem o come il controllo dei div utilizzando solo i margini e il riempimento e non impostando mai una dimensione predefinita.

• Bootstrap, poiché utilizza i float, necessita di clearfix dopo ogni riga, altrimenti otterrai div disallineati di diversa altezza. Flex-box non lo fa e controlla invece il div più alto nel contenitore e si attacca alla sua altezza.

L'unica ragione per cui andrei con bootstrap su flex-box è la mancanza di supporto del browser (principalmente IE) (già morto). E a volte ricevi comportamenti diversi da Chrome e Safari anche se entrambi usano lo stesso motore webkit.

Modificare:

A proposito se l'unico problema che stai affrontando sono le colonne di uguale altezza, ci sono alcune soluzioni per questo:

• Puoi usare display: tableil genitore, e display: table-cell;il figlio. Vedi Come ottenere la stessa altezza in display: table-cell

• Puoi utilizzare il posizionamento assoluto su ogni div:
  position: absolute; top: 0; bottom: 0;

• C'è anche la soluzione jquery / JS e un'altra soluzione che non ricordo al momento che proverò ad aggiungere in seguito.

Modifica 2:

Controlla anche http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties su come funziona la flex-box.

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

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

Non ho mai usato Flexbox (ne ho letto e mi sembra ottimo) ma sono uno sviluppatore di front-end Bootstrap. Ti suggerisco di provare a stampare le pagine Flexbox prima di prendere una decisione finale. Sai ... A volte gli stili di stampa sono un terribile mal di testa e Bootstrap mi aiuta molto quando devo progettare formati di stampa.

Temo che ti sia perso un altro articolo sui trucchi CSS :

Nota: il layout Flexbox è più appropriato per i componenti di un'applicazione e per i layout su piccola scala, mentre il layout Grid è destinato a layout su larga scala.

Non significa che potresti non provare, ma pensaci due volte. E tutto dipende dal supporto del browser desiderato alla fine.