Display:inline

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 :

• Voir l’article
  Flexible Box Model
  hacks.mozilla.org.com

Be Sociable, Share!

•