Flexbox vs Twitter Bootstrap (ou cadre similaire) [fermé]

j'ai récemment découvert Flexbox quand je cherchais une solution pour faire divs la même hauteur, en fonction de la plus haute.

j'ai lu le page suivante sur CSS-tricks.com et cela m'a convaincu que flexbox est un module très puissant à apprendre et à utiliser. Cependant, il m'a également fait penser au fait que Bootstrap Twitter (et cadres similaires) offrent en quelque sorte les mêmes fonctions (+ bien sûr beaucoup plus) avec leur des systèmes de grille.

maintenant, les questions sont: Quels sont les pour et les contre de flexbox ? Y a-t-il quelque chose que L'on ne peut pas faire avec Flexbox qu'on peut faire avec un framework comme Bootstrap (bien sûr parler purement du système de grille)? Lequel est le plus rapide lorsqu'il est mis en œuvre sur un site web?

je devine quand seulement pour le système de grille, il est plus intelligent d'utiliser purement flexbox , mais ce que si vous êtes déjà en utilisant un cadre, est - il quelque chose flexbox peut ajouter?

y a-t-il des raisons de choisir flexbox 's" grid system " sur un framework?

153
demandé sur Rvervuurt 2014-12-22 11:54:50

3 réponses

pour quelques raisons, flexbox est beaucoup mieux que bootstrap:

  • Bootstrap utilise des flotteurs pour faire le système de grille, ce que beaucoup diraient n'est pas destiné pour le web, où flex-box fait le contraire en restant flexible à la taille et au contenu des articles; même différence que l'utilisation de pixels vs em/rem, ou comme contrôler vos divs seulement en utilisant les marges et le rembourrage et ne jamais définir une taille prédéfinie.

  • Bootstrap, parce qu'il utilise des flotteurs, a besoin de clearfix après chaque ligne, ou vous obtiendrez des divs mal alignées de hauteur différente. Flex-box ne fait pas cela et vérifie à la place la div la plus haute dans le conteneur et colle à sa hauteur.

la seule raison pour laquelle j'utiliserais bootstrap sur flex-box est le manque de support du navigateur (c'est-à-dire principalement) (déjà mort). Et parfois vous obtenez un comportement différent de Chrome et Safari, même si les deux utilisent le même moteur webkit.

Edit:

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: tableau-cellule

  • vous pouvez utiliser absolute positionnement 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 j'essaierai d'ajouter plus tard.

Edit 2:

vérifiez aussi http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties sur la manière de flex-zone de travaux.

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

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

99
répondu ctf0 2018-01-23 12:17:40

Je n'ai pas utilisé Flexbox (j'ai lu à ce sujet et semble être grand) mais je suis un bootstrap frontend dev. 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 terrible casse-tête et Bootstrap m'aide beaucoup quand je dois concevoir des formats d'impression.

5
répondu kurroman 2014-12-22 11:02:43

je crains que vous ayez manqué un autre article sur les trucs CSS :

Note: la disposition en Flexbox convient le mieux aux éléments d'une application et aux dispositions à petite échelle, tandis que la disposition en quadrillage est prévue pour des dispositions à plus grande échelle.

ne signifie pas, vous ne pouvez pas essayer, mais juste réfléchir à deux fois. Et tout dépend souhaité prise en charge du navigateur à la fin.

0
répondu Kout 2015-02-02 14:48:21