Flex-spacing

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

伸缩项目间距 ―「flex-spacing」属性

名称: flex-spacing
取值: <length>|auto
初始: 依据算法模型
适用于: 依据算法模型
继承:
百分比: 相对于伸缩容器内的剩余空间
媒介: 视觉
计算值: 待定
动画: 支持

属性产生背景

在伸缩容器中,目前虽然有「justify-content」属性来控制「flex-item」之间剩余空间的分配,有「flex-basis」控制伸缩项目的伸缩基准值,用来控制伸缩项目的宽度。但是并不是所有的时候我们都期望伸缩项目的宽度是可伸缩的,有时候,我们期望宽度保持内容宽度(或者固定宽度),可伸缩的是伸缩项目之间的间距,所以引入该属性的目的在于更加灵活的控制「flex-item」之间的间距。由于该属性是支持「百分比」宽度的,所以也可以间接实现主轴方向上显示「flex-item」的个数。例如:

<style type="text/css">
.box {
	width: 400px;
	background:#DDD;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	border:1px solid red;
}
.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
span {
	width: 90px;
	height: 50px;
	border: 5px solid blue;
	min-width: 0;
	flex-spacing: 50px;/* 期望生效的值 */
}
</style>
<div class="box">
 	<div class="flex">
 		<span>flex-item1</span>
 		<span>flex-item2</span>
  		<span>flex-item3</span>
 		<span>flex-item4</span>
 	</div>
</div>
 

我们期望的效果如下:

Flex-spacing-before.png

查看demo

但是实际上的效果是这样的:

Flex-spacing-after.png

查看demo

flex-item 的实际宽度是 100px,那么伸缩容器总宽度是400px,此时刚好容纳下四个伸缩项目,我们想在主轴上显示三个伸缩容器就比较困难了,只能借助于 margin 或者 padding。实际上目前我们实现这样的布局是这么做的:

<style type="text/css">
.box {
	width: 400px;
	background:#DDD;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	border:1px solid red;
}
.flex {
	display: -webkit-flex;
	display: flex;
	/* -webkit-justify-content: space-between; */
	-webkit-flex-wrap: wrap;
	margin-right:-50px;
}
span {
	width: 90px;
	flex-spacing: 50px;
	border: 5px solid blue;
	min-width: 0;
	height: 50px;
	margin-right:50px;
}
</style>

算法模型1

  1. 「flex-spacing」作用于伸缩容器上,用于直接指定「flex-item」元素之间的最小间距,「flex-item」与主轴起点、主轴终点之间不存在「flex-spacing」;
  2. 默认值为 auto,它的取值可以是具体的带有单位的数值或者为 0,不支持负值;
  3. 当伸缩容器设定「justify-content:space-between」或者「justify-content:space-around」时,「flex-spacing」的默认值为auto;
  4. 当伸缩容器设定「justify-content:space-between」或者「justify-content:space-around」时,「flex-spacing」的设定值大于伸缩项目之间的剩余平均空间时「flex-spacing」的取值为指定值;
  5. 否则「justify-content」为其他三种取值时,「flex-spacing」的默认值为0。

算法模型2

  1. 「flex-spacing」作用于伸缩项目上, 「flex-item」与主轴起点、主轴终点之间不存在「flex-spacing」;
  2. ……
Flex-pack-new.png

通过伸缩容器中的三个不同颜色的项目,展示五种「justify-content」关键字的效果。


一丝
2012-11-5 晚