web-dev-qa-db-fra.com

Modèle de boîte flexible - affichage: flex, box, flexbox?

Beaucoup d'entre nous savent aujourd'hui que les anciennes valeurs de la propriété display comme inline et block sont obsolètes après l'introduction du nouveau modèle de boîte flexible dans CSS3. Mais, nous pourrions trouver différentes informations sur le Web dans le même modèle de boîte flexible.

Nous pouvons trouver principalement 3 valeurs différentes de la propriété display à savoir flex, box et flexbox. Quelle est la différence entre ces trois modèles de boîtes flexibles et lequel utiliser?

cssflexbox
25
Kevin

Vous utilisez ceux dont vous avez besoin pour les navigateurs dont vous avez besoin.

display: box

  • Firefox 2.0? (préfixé)
  • Chrome 4.0? (préfixé)
  • Safari/iOS 3.1? (préfixé)
  • Android 2.1 (préfixé)

Pour autant que je sache, l'encapsulation via box-lines: multiple n'est implémenté dans aucun navigateur.

display: flexbox

  • Chrome 17- ?? (préfixé)
  • Internet Explorer 10 (préfixé)

display: flex - la norme actuelle

  • Chrome 21 (préfixé), 29 (non préfixé)
  • Opera 12.1 (non préfixé), 15 (préfixe webkit)
  • Firefox 22 (non préfixé)
  • Safari/iOS 7 (préfixé)
  • Blackberry 10 (préfixé)
  • Internet Explorer 11 (non préfixé)

http://caniuse.com/#feat=flexbox (Notez qu'IE10 est le seul navigateur marqué comme ayant un support partiel qui prend en charge le wrapping)

Les spécifications pour flexbox et flex sont suffisamment similaires, il n'y a aucune raison de ne pas inclure les deux, d'autant plus qu'IE10 ne prend en charge que la spécification flexbox. La spécification de box est très différente et peut ne pas valoir la peine d'être incluse selon l'effet que vous recherchez, même si presque toutes les propriétés ont un analogue à celles trouvées dans le flexbox/flex spécifications.

Vous constaterez peut-être que certains navigateurs prennent en charge plusieurs spécifications. Il arrivera probablement un moment où ils abandonneront la prise en charge des anciennes spécifications, assurez-vous donc toujours d'inclure les propriétés flex.

40
cimmanon

Pour autant que je sache, les trois versions différentes ci-dessus du modèle de boîte flexible peuvent être classées selon leur âge.

  1. display: box - C'était le premier modèle de boîte flexible qui a été accepté comme le plus récent modèle vers l'année 2009. Ne l'utilisez pas.

  2. display: flexbox - Ce modèle de boîte flexible est venu dans l'année 2011 qui était encore dans son développement. Ne l'utilisez pas.

  3. display: flex - C'est le dernier modèle de boîte flexible qui trouve actuellement sa place en tant que norme de boîte la plus récente. Cela pourrait encore subir quelques modifications, mais cela est préférable aux deux autres normes.

14
Kevin