Flexbox vs Twitter Bootstrap (ou un cadre similaire)

J’ai récemment découvert Flexbox alors que je cherchais une solution pour rendre les divs les mêmes, en fonction de la plus élevée.

J’ai lu la page suivante sur CSS-sortingcks.com et cela m’a convaincu que flexbox est un module très puissant à apprendre et à utiliser. Cependant, cela m’a aussi fait penser au fait que Twitter Bootstrap (et les frameworks similaires) offrent les mêmes fonctions (+ bien sûr beaucoup plus) avec leurs systèmes de grid.

Maintenant, les questions sont les suivantes: Quels sont les avantages et les inconvénients de la flexbox ? Y a-t-il quelque chose que l’on ne peut pas faire avec Flexbox que l’on peut faire avec un framework comme Bootstrap (bien sûr, parler uniquement du système de grid)? Lequel est plus rapide lorsqu’il est implémenté sur un site Web?

Je devine quand seulement pour le système de grid, il est plus intelligent d’utiliser uniquement la flexbox , mais si vous utilisez déjà un framework, y a-t-il quelque chose que flexbox peut append?

Existe-t-il des raisons de choisir le «système de grid» de flexbox sur un framework?

Pour plusieurs raisons, la flexbox est bien meilleure que le bootstrap:

  • Bootstrap utilise des flottants pour rendre le système de grid, ce que beaucoup diraient qu’il n’est pas destiné au Web, où flex-box fait le contraire en restant flexible en fonction de la taille et du contenu des éléments; Même différence que l’utilisation de pixels vs em / rem, ou le contrôle de vos div en utilisant uniquement des marges et des marges et en ne définissant jamais une taille prédéfinie.

  • Bootstrap, car il utilise des flottants, nécessite un correctif après chaque ligne ou vous obtenez des divs de hauteur différente mal alignés. Flex-box ne fait pas cela et vérifie plutôt la plus grande div dans le conteneur et colle à sa hauteur.

La seule raison pour laquelle j’irais avec bootstrap sur flex-box est le manque de support du navigateur (IE principalement) (meurs déjà). Et parfois, vous obtenez un comportement différent de Chrome et Safari, même si les deux utilisent le même moteur Webkit.

Modifier:

BTW si le seul problème que vous rencontrez est les colonnes de hauteur égale, il y a pas mal de solutions pour cela:

  • Vous pouvez utiliser display: table sur le parent, un display: table-cell; sur l’enfant. Voir Comment obtenir la même hauteur à l’écran: cellule de tableau

  • Vous pouvez utiliser un positionnement absolu sur chaque div:
    position: absolute; top: 0; bottom: 0;

  • Il y a aussi la solution jquery / JS, et une autre solution dont je ne me souviens pas pour le moment que je vais essayer d’append plus tard.

Edit 2:

Consultez également http://chriswrightdesign.com/experiments/flexbox-adventures/ et https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties sur le fonctionnement de Flex-Box.

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

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

Je n’ai pas utilisé Flexbox (j’ai lu à ce sujet et semble être génial) mais je suis un dev de frontend Bootstrap. Je vous suggère de tester les pages d’impression Flexbox avant de prendre une décision finale. Vous savez … parfois les styles d’impression sont un mal de tête terrible et Bootstrap m’aide beaucoup quand je dois concevoir des formats d’impression.

Je crains que vous ayez manqué un autre article sur les astuces CSS :

Remarque: la mise en page Flexbox est la plus appropriée pour les composants d’une application et les mises en page à petite échelle, tandis que la disposition Grille est destinée aux mises en page à plus grande échelle.

Cela ne veut pas dire que vous ne pouvez pas essayer, mais juste réfléchir à deux fois. Et tout dépend du support de navigateur souhaité à la fin.