CSS3 introduit un nouveau modèle de boîte : le modèle de boîte flexible, qui détermine comment une boîte est distribuée parmi d'autres boîtes et comment l'espace disponible est géré. Ceci est similaire à XUL (le langage d'interaction utilisateur utilisé par Firefox), et d'autres langages utilisent également le même modèle de boîte, comme XAML et GladeXML.
Grâce à ce modèle, vous pouvez facilement créer une mise en page fluide qui s'adapte à la fenêtre du navigateur ou une mise en page flexible qui s'adapte à la taille de la police. Les exemples de cet article utilisent le code HTML suivant :
<corps>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</corps>
Le modèle de boîte traditionnel organise les boîtes verticalement en fonction du flux HTML. En utilisant le modèle flexbox, vous pouvez spécifier un ordre spécifique et l'inverser. Pour activer le modèle de boîte flexible, définissez simplement la valeur de l'attribut d'affichage de la boîte avec les boîtes enfants sur box (ou inline-box).
affichage : boîte ;
Répartition horizontale ou verticale
"box-orient" définit les axes de coordonnées de la distribution : vertical et horizontal. Ces deux valeurs définissent la manière dont la case est affichée
corps{
affichage : boîte ;
orientation de la boîte : horizontale ;
}
distribution inversée
"box-direction" peut définir l'ordre dans lequel les cases apparaissent. Par défaut, il vous suffit de définir l'axe de distribution - les cases sont distribuées avec le flux html. S'il s'agit d'un axe horizontal, il est distribué de gauche à droite ; s'il s'agit d'un axe vertical, il est distribué de haut en bas. Définissez la valeur de l'attribut "box-direction" comme "reverse" pour inverser l'ordre des cases.
corps {
affichage : boîte ;
orientation de la boîte : verticale ;
direction de la boîte : inverse ;
}
distribution spécifique
L'attribut "box-ordinal-group" définit l'ordre dans lequel les boîtes sont distribuées. L'ordre de distribution peut être contrôlé à volonté. Les groupes sont définis avec un numéro commençant à "1" et le modèle de boîte répartira ces groupes en premier et toutes ces boîtes seront dans chaque groupe. La distribution sera organisée du petit au grand.
corps {
affichage : boîte ;
orientation de la boîte : verticale ;
direction de la boîte : inverse ;
}
#boîte1 {
groupe-ordinal-boîte : 2 ;
}
#boîte2 {
groupe-ordinal-boîte : 2 ;
}
#boîte3 {
groupe ordinal de boîte : 1 ;
}
