Flex-spacing

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

属性产生背景

在伸缩容器中，目前虽然有「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>
 

我们期望的效果如下:

查看demo

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

查看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. ……

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

一丝
2012-11-5 晚