css中的正面和负面灵活性有什么区别

时间:2014-05-14 23:46:11

标签: css css3 flexbox

我正在阅读IE here的box-flex文档,我注意到使用'正面'和'负面'的灵活性。

有人可以解释这些术语的含义以及它们的区别吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

正灵活性指定要分配到每个弹性项目维度的额外空间的比例。在新规范中,它被称为<'flex-grow'>

负柔韧性指定要从每个弹性项目的维度中减去的溢出大小的比例。在新规范中,它被称为<'flex-shrink'>

例如,让我们说你有以下css :(顺便说一句,根据msdn,从IE11开始不再需要-ms-供应商前缀)

section{
 display:-ms-flexbox;
 -ms-flex-direction: row;}

article{
 -ms-flex: 1 1 200px;}

ms-flex的第三个值是子元素的首选大小,指定时它将在任何参数生效之前应用。 (的<“柔性基础” &GT)

ms-flex的第一个值是正灵活性,因此,例如,如果三篇文章的父元素是750px,而在我们的示例中,所有文章的flex值都是1,则剩余的150px将在三篇儿童文章::每个孩子的最终尺寸(本例中的宽度)为250px。如果出于某种原因,其中一篇文章被改为具有2的正向弯曲,那么它将获得两倍于剩余空间的两倍于一篇文章的另外两个:: 275px尺寸,而另外两个尺寸为237.5px

ms-flex的第二个值是负柔性,它在正弯曲的相反方向上起作用到一定程度(除了它在用于制作比例之前乘以柔性基础,即较大的项目将,通常比较小的收缩更多)。因此,例如,如果三篇文章的父元素是750px并且每篇文章被指定为具有300px而不是200px的首选大小,那将导致150px的溢出,因此这是负的flex 1发挥作用并减少每篇文章大小相同50px,以便每篇文章最终大小为250px。类似地,如果指定其中一篇文章的负弯曲度为2而不是1,则其大小(在这种情况下为宽度)将减少两倍于其余两篇文章:: 225px的两倍于具有2的负弯曲的文章其余两个负弯曲为1的情况下为262.5。

这是一个复杂的解释,所以我会尽力总结一下,如果我错过了什么,请原谅。

  1. 首先应用首选尺寸
  2. 如果父级
  3. 中有剩余空间,则应用正向flex值
  4. 如果父级大小超出溢出,则应用负弹性值。元素将根据设定的比例收缩,直到它们适合。
  5. 这可以扩展,但我希望它能让你走上正确的道路,了解积极和消极的灵活性意味着什么。