CSS 3: Le modèle de boîte flexible
Développement Web - CSS
Jeudi, 28 Octobre 2010 16:22

Dans cet article, je vous propose de découvrir une des "magies" du CSS 3: le modèle de boîte flexible (Flexible Box Model), un nouveau modèle de positionnement de bloc. Vous connaissez déjà display: block et display: inline. Désormais, vous pourrez ajouter display: box à vos connaissances. Grâce à ce nouveau modèle, vous pourrez:

  • positonner des éléments verticalement ou horizontalement sans utiliser la propriété float
  • créer des mises en page fluides qui s'adaptent à la taille de la fenêtre du navigateur, sans que vous n'ayez à faire des calculs
  • gérer l'ordre d'affichage des éléments

et bien plus encore.

Le modèle est supporté nativement par Firefox 3.0+ (en utilisant le préfixe -moz-), Safari 3.2+ et Chrome 5.0+ (en utilisant le préfixe -webkit-).

Disposition horizontale ou verticale

Dans le modèle de boîte flexible, les enfants d'un bloc définit avec display: box, sont disposés horizontalement ou verticalement. La propriété box-orient permet de spécifier l'orientation (horizontal ou vertical). Par défaut, les éléments sont disposés horizontalement.

<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</body>

body {
    display: -moz-box;
    display: -webkit-box;
    display: box;

    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
     box-orient: horizontal;
 }

 div[id^="box"] {
    width: 150px;
    height: 250px;
 }
#box1 {
   background-color: #FFCCCC;
}

#box2 {
   background-color: #CCFFCC;
}

#box3 {
   background-color: #CCCCFF;
}

Inverser l'ordre d'affichage

La propriété box-direction permet de spécifier l'ordre dans lequel les éléments doivent s'afficher. Si vous voulez afficher les éléments du dernier au premier, fixez sa valeur à reverse. Dans les prochains exemples, je n'utiliserai plus les préfixes -moz- et -webkit-. Ajoutez-les si vous voulez tester les exemples.

body {
    display: box;
    box-orient: vertical;
    box-direction: reverse;
}

Ordre d'affichage explicite

Vous pouvez également modifier l'ordre en précisant explicitement les éléments qui seront affichés en première position, en deuxième position, et ainsi de suite.

La propriété box-ordinal-group prend comme valeur un entier représentant l'odre d'affichage. Les éléments ayant la valeur la plus petite sont affichées en premier. Pour afficher, par exemple, le bloc 3, ensuite les blocs 1 et 2:

#box1 { box-ordinal-group: 2 }
#box2 { box-ordinal-group: 2 }
#box3 { box-ordinal-group: 1}

Flexibilité

Avec la propriété box-flex, la largeur/hauteur de chaque élément est relative aux autres éléments.

#box1 { box-flex: 1 }
#box2 { box-flex: 2 }
#box3 { box-flex: 2 }

Dans l'exemple ci-dessus, les blocs 2 et 3 auront deux fois la largeur du bloc 1.

Centrer le contenu

La propriété box-pack gère l'alignement horizontal peut prendre les valeurs: start, end, center, justify.

Tandis que la propriété box-align gère l'alignement vertical. Elle peut prendre les valeurs: start, end, center, baseline, stretch.

body {
   box-pack: center;
   box-align: center;
}

Quelques exemples

Visitez hacks.mozilla.org pour des exemples d'utilisation.

Et que dire de ce magnifique template entièrement réalisé avec ce modèle.

Pour les navigateurs plus anciens

Malheureusement, le CSS 3 n'est pas encore totalement supporté par tous les navigateurs. Le modèle de boîte flexible, particulièrement, n'est pas supporté par Internet Explorer et Opera. En revanche, il existe une librairie Javascript, nommée FlexIE qui permet à ces navigateurs d'interpréter ce modèle.

Conclusion

Le modèle de boîte flexible est un moyen facile et simple de résoudre certains problèmes de conception Web. Familiarisez-vous à ce modèle car il pourrait devenir un outil standard pour les développeurs Web dans un avenir proche.

 
Mise à jour le Dimanche, 31 Octobre 2010 17:50
 

ismael.toe[at]gmail[dot]com

Page Facebook