ID：28868812
大小：120.50 KB
页数：6页
时间：2018-12-14
2、型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。display:box;水平或垂直分布“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示body{display:box;box-orient:horizontal;}反向分布精彩文档实用标准文案“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box
3、-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;}#box
4、2{box-ordinal-group:2;}#box3{box-ordinal-group:1;}精彩文档实用标准文案盒子尺寸默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。如果盒子是弹性的，其大小将按下面的方式计算：1.具体的大小声明（width、height、min-width、min-height、max-width、max-he
5、ight）；2.父盒子的大小和所有余下的可利用的内部空间如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。看看下面的例子，理解起来更容易。所有盒子都是弹性的下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子
6、的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。body{display:box;box-orient:horizontal;}#box1精彩文档实用标准文案{box-flex:2;}#box2{box-flex:1;}#box3{box-flex:1;}一些盒子有固定大小下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。body{display:box;box-orient:horizontal;
7、width:400px;}#box1{box-flex:2;}#box2{box-flex:1;}#box3{width:160px;}精彩文档实用标准文案溢出管理因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。空间太多如何处理可利用空间的分布取决于两个属性值：box-align和box-pack。属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、justify、orcenter。1.start所有盒子在父盒子的左侧，余下的空间
此文档下载收益归作者所有
