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

J'ai récemment découvert Flexboxquand je cherchais une solution pour faire des divs la même hauteur, en fonction de la plus élevée.

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

Maintenant, les questions sont: quels sont les avantages et les inconvénients de 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 en parlant purement du système de grille)? Lequel est le plus rapide lorsqu'il est mis en œuvre sur un site Web?

Je suppose que seulement pour le système de grille, il est plus intelligent à utiliser purement flexbox, mais que se passe-t-il si vous utilisez déjà un cadre, y a-t-il quelque chose à flexboxajouter?

Y a-t-il des raisons de choisir flexboxle «système de grille» par rapport à un cadre?

Pour plusieurs raisons, flexbox est bien meilleur que bootstrap:

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

• Bootstrap, car il utilise des flotteurs, a besoin de clearfix après chaque ligne, ou vous obtiendrez des divs mal alignés de différentes hauteurs. Flex-box ne fait pas cela et vérifie à la place le plus grand 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 (principalement IE) (mourir déjà). Et parfois, vous obtenez un comportement différent de Chrome et Safari même si les deux utilisent le même moteur de kit Web.

Éditer:

BTW si le seul problème auquel vous êtes confronté est les colonnes de hauteur égale, il existe plusieurs solutions pour cela:

• Vous pouvez utiliser display: tablesur le parent, un display: table-cell;sur l'enfant. Voir Comment obtenir la même hauteur dans l'affichage: table-cell

• Vous pouvez utiliser le 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 j'essaierai d'ajouter plus tard.

Modifier 2:

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

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

Modifier 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 développeur 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 terrible casse-tête et Bootstrap m'aide beaucoup lorsque je dois concevoir des formats d'impression.

J'ai peur que vous ayez manqué un autre article sur les astuces CSS :

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

Cela ne veut pas dire que vous ne pouvez pas essayer, mais réfléchissez à deux fois. Et tout dépend de la prise en charge du navigateur souhaitée à la fin.