web-dev-qa-db-fra.com

Flexbox vs Twitter Bootstrap (ou un cadre similaire)

J'ai récemment découvert Flexbox alors que je cherchais une solution pour que les divs aient 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, cela m'a aussi fait penser au fait que Twitter Bootstrap (et des frameworks similaires) offrent 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 et qu’on peut faire avec un cadre tel que Bootstrap (bien sûr, il ne s’agit que de parler du système de grille)? Lequel est le plus rapide lorsqu'il est mis en œuvre sur un site Web?

J'imagine que, pour le système de grille uniquement, il est plus judicieux d'utiliser purement flexbox, mais si vous utilisez déjà un cadre, y a-t-il quelque chose que flexbox peut ajouter?

Y a-t-il des raisons de choisir le "système de grille" de flexbox plutôt que celui d'un framework?

htmlcsstwitter-bootstrapflexbox
159
Rvervuurt

Pour quelques raisons, flexbox est bien meilleur que bootstrap:

  • Bootstrap utilise des flotteurs pour créer le système de grille, ce qui, d’après de nombreuses personnes, n’est pas destiné au Web, où flex-box fait l’inverse en restant flexible en ce qui concerne la taille et le contenu des éléments; Même différence que l'utilisation de pixels vs em/rem, ou de contrôler vos divs uniquement en utilisant des marges et du remplissage et en ne définissant jamais une taille prédéfinie.

  • Bootstrap, car il utilise des éléments flottants, nécessite clearfix après chaque ligne ou vous obtiendrez des divs mal alignés de hauteur différente. Flex-box ne fait pas cela, mais vérifie la plus haute div du conteneur et reste fidèle à sa hauteur.

La seule raison pour laquelle j'irais avec bootstrap sur flex-box est un manque de prise en charge du navigateur (principalement Internet) (mourir déjà). Et parfois, vous obtenez un comportement différent de Chrome et de 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 existe plusieurs 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: 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.

Éditer 2:

Voir aussi http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox- propriétés sur le fonctionnement de flex-box.

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

Éditer 4: https://caniuse.com/#feat=flexbox

105
ctf0

Je n'ai pas utilisé Flexbox (j'ai lu et cela semble excellent), mais je suis un Bootstrap développeur frontend. Je vous suggère de tester Flexbox l'impression des pages avant de prendre une décision finale. Vous savez ... Parfois, les styles d'impression sont un casse-tête terrible et Bootstrap m'aide beaucoup lorsque je dois concevoir des formats d'impression.

6
kurroman

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

Remarque: _ La mise en page Flexbox convient le mieux aux composants d'une application et aux dispositions à petite échelle, tandis que la disposition en grille est destinée à des dispositions à plus grande échelle.

Ne signifie pas, vous ne pouvez pas essayer, mais réfléchissez-y à deux fois. Et tout dépend du support de navigateur souhaité à la fin.

1
Kout