Css3 弹性盒模型介绍（附DEMO演示）
|
Css3引入了新的盒模子——弹性盒模子，该模子抉择一个盒子在其他盒子中的漫衍方法以及如那里理赏罚可用的空间。这与XUL（火狐行使的用户交互说话）相似，其余说话也行使沟通的盒模子，如XAML 、GladeXML。 行使该模子，可以很轻松的建设自顺应赏识器窗口的活念头关或自顺应字体巨细的弹性机关。本文的例子行使以下的HTML代码: <body> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </body> 传统的盒模子基于HTML流在垂直偏向上分列盒子。行使弹性盒模子可以划定特定的次序，也可以反转之。要开启弹性盒模子，只需配置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。 display: box; 程度或垂直漫衍 “box-orient”界说漫衍的坐标轴：vertical和horizional。这两个值界说盒子怎样表现， body{
display: box;
box-orient: horizontal;
}
反向漫衍 “box-direction”可以配置盒子呈现的次序。默认环境下，只需界说漫衍坐标轴——box随html流漫衍。假如为程度坐标轴，则从左到右漫衍；垂直坐标轴则从上到下漫衍。界说“box-direction”的属性值为“reverse”，则反转盒子的分列次序。 body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
详细漫衍 属性“box-ordinal-group”界说盒子漫衍的次序。可以随意的节制其漫衍次序。这些组以一个从“1”开始的数字界说，盒模子将起首漫衍这些组，全部这些盒子将在每个组中。漫衍将从小到大分列。 body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {
box-ordinal-group: 2;
}
#box2 {
box-ordinal-group: 2;
}
#box3 {
box-ordinal-group: 1;
}
盒子尺寸 默认环境下，盒子并不具有弹性，假如box-flex的属性值至少为1时，则变得富有弹性。 假如盒子不具有弹性，它将尽也许的宽使其内容可见，且没有任何溢出，其巨细由“width”和“height”来抉择（或min-height、min-width、max-width、max-height）。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
