css中的积极灵活性和消极灵活性有什么区别

css中的积极灵活性和消极灵活性有什么区别,css,flexbox,Css,Flexbox,我正在阅读IE的box flex文档,我注意到了“积极”和“消极”灵活性的使用 有人能解释一下这些术语的含义以及它们之间的区别吗 谢谢 正向灵活性指定分配给每个弹性项维度的额外空间比例。在新规范中,它被称为 负灵活性指定从每个弹性项的维度中减去的溢出大小的比例。在新规范中,它被称为 例如,假设您有以下css:(顺便说一句,根据msdn,从IE11起不再需要-ms-vendor前缀) ms flex的第三个值是子元素的首选大小,当指定时,它将在任何参数生效之前应用。() ms flex的第一个值是

我正在阅读IE的box flex文档,我注意到了“积极”和“消极”灵活性的使用

有人能解释一下这些术语的含义以及它们之间的区别吗


谢谢

正向灵活性指定分配给每个弹性项维度的额外空间比例。在新规范中,它被称为

负灵活性指定从每个弹性项的维度中减去的溢出大小的比例。在新规范中,它被称为

例如,假设您有以下css:(顺便说一句,根据msdn,从IE11起不再需要-ms-vendor前缀)

ms flex的第三个值是子元素的首选大小,当指定时,它将在任何参数生效之前应用。(

ms flex的第一个值是正弹性,因此,例如,如果三个项目的父元素为750px,并且在我们的示例中,所有项目的正弹性值为1,则剩余的150px将在三个子项目中平均分配::每个子项目的大小(本例中的宽度)将为250px。如果出于某种原因,其中一个项目被更改为具有2的正flex,那么它将获得两倍于其他两个项目的剩余空间::一个项目的275px大小,另两个项目的237.5px大小

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

这是一个有点复杂的解释,所以我会尽力总结,如果我遗漏了什么,请原谅

  • 首先应用首选尺寸
  • 如果父级中有剩余空间,则应用正的弹性值
  • 如果在父级大小之上存在溢出,则应用负的弹性值。元素将根据设置的比率进行收缩,直到它们适合

  • 这可以进一步扩展,但我希望它能让您正确理解积极和消极灵活性的含义。

    FYI,这些术语适用于较旧的flexbox规范,在最新规范中不再存在。相关:它们不是完全相反——flex shrink在使用之前还有一个额外的步骤。在用于制作比例之前,它会乘以弹性基础。这意味着通常,较大的项目比较小的项目收缩更多。例如,如果有两个flex收缩项:1,一个从10px开始,另一个从90px开始,它们的flex容器溢出10px,那么我们将从较小的一个中取出1px,从较大的一个中取出9px。(如果flex shrink的行为与flex grow一样,那么我们将从每个人身上获得5px。)同意将更新我的解释以包含您的输入。谢谢
    section{
     display:-ms-flexbox;
     -ms-flex-direction: row;}
    
    article{
     -ms-flex: 1 1 200px;}