Le flexible box model en CSS3

2 commentaires

Par Seb

Actuellement, pour gérer l’alignement des éléments de type block en html, il est possible d’utiliser les valeurs display: block ou display: inline, ou encore de définir les éléments comme flottants (avec les contraintes que l’on connait).

En CSS3, un nouveau modèle de positionnement de bloc fait son apparition : le flexible box model. Il permet un meilleur contrôle de l’organisation des éléments :

  • Afficher les éléments côte à côte sans utiliser la propriété float
  • Inverser l’ordre des éléments : le premier dans le code sera tout en bas, et inversement
  • Gérer l’ordre d’affichage élément par élément – par exemple, afficher le 3ème bloc tout en haut
  • Définir les proportions des éléments les uns par rapport aux autres, sans utiliser de pourcentages – et donc sans devoir tout recalculer lors de l’ajout ou du retrait d’un élément
  • Gérer comment sont répartis les blocs au sein de leur élément parent (en haut, en bas, centré, justifié…), et comment est distribué l’espace vide restant (à gauche, à droite, entre chaque élément…)
  • Et encore d’autres joyeusetés !

L’utilisation de ce mode de positionnement se fait tout simplement en utilisant la propriété suivante :

display: box;

Pour l’instant, cette propriété n’est gérée que de façon expérimentale par Firefox et Webkit (Safari, Chrome), vous pouvez donc l’essayer en utilisant les préfixes habituels : -moz- et -webkit-, en attendant l’intégration définitive des spécifications. Et pour les anciens navigateurs, les blocs en display: box se comporteront de façon traditionnelle, pensez donc à prévoir un mode dégradé pour votre mise en page !

Je vous renvoie donc à l’excellent article de Paul Rouget sur le site hacks.mozilla.org :


2 commentaires


Exprimez vous !


(Ne sera pas publié)

Sur ThemeForest

  • Constellation complete admin skin
  • Developr - Fully Responsive Admin Skin
  • Blue Earth
  • Blue Earth Wordpress theme