Warning:
This wiki has been archived and is now read-only.
Flex-spacing
From HTML5 Chinese Interest Group Wiki
伸缩项目间距 ―「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>
我们期望的效果如下:
Error creating thumbnail: Unable to save thumbnail to destination
但是实际上的效果是这样的:
Error creating thumbnail: Unable to save thumbnail to destination
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
- 「flex-spacing」作用于伸缩容器上,用于直接指定「flex-item」元素之间的最小间距,「flex-item」与主轴起点、主轴终点之间不存在「flex-spacing」;
- 默认值为 auto,它的取值可以是具体的带有单位的数值或者为 0,不支持负值;
- 当伸缩容器设定「justify-content:space-between」或者「justify-content:space-around」时,「flex-spacing」的默认值为auto;
- 当伸缩容器设定「justify-content:space-between」或者「justify-content:space-around」时,「flex-spacing」的设定值大于伸缩项目之间的剩余平均空间时「flex-spacing」的取值为指定值;
- 否则「justify-content」为其他三种取值时,「flex-spacing」的默认值为0。
算法模型2
- 「flex-spacing」作用于伸缩项目上, 「flex-item」与主轴起点、主轴终点之间不存在「flex-spacing」;
- ……
Error creating thumbnail: Unable to save thumbnail to destination
通过伸缩容器中的三个不同颜色的项目,展示五种「justify-content
」关键字的效果。
一丝
2012-11-5 晚