在jQuery中添加带前缀的flex样式

Question

我正在尝试将flex属性添加到对象中。我就是这样做的：

el.css({"flex": 1, "-webkit-flex": 1, "-ms-flex": 1, "-moz-flex": 1});

但是，当我在DevTools Inspector中检查元素时，我看到这个样式被添加：

style="flex:1 1 1px"

所以，我想知道1 1 1px来自何处以及为什么我没有看到跨浏览器属性-webkit-flex等？

Answer 1

我认为您需要在所有""中添加引号1。

el.css({
    "flex" : "1", 
    "-webkit-flex" : "1", 
    "-ms-flex" : "1", 
    "-moz-flex" : "1"
});

最好重新排序规则，首先是前缀。

el.css({
    "-webkit-flex" : "1", // Safari 8
    "-ms-flex" : "1",     // IE 10
    "flex" : "1"          // Modern browsers
});

-moz-flex现在没有必要。

修改

根据this post，较新的jQuery v1.8.0 +会自动添加供应商前缀。

这意味着它可以如此简单：

el.css({
    "flex" : "1"
});

Answer 2

根据https://developer.mozilla.org/en-US/docs/Web/CSS/flex：

  

/ *一个值，无单位数：flex-grow * /   flex：2;

     

值

     

＆LT;＆＃39;挠曲长出＆＃39;＆GT;定义flex项的flex-grow。看看   更多细节。负值被视为无效。默认为1   什么时候省略

     

＆LT;＆＃39;挠曲收缩＆＃39;＆GT;定义flex的flex-shrink   项目。有关详细信息，请参阅考虑负值   无效。省略时默认为1。

     

＆LT;＆＃39;柔性基础＆＃39;＆GT;定义   flex项目的flex-basis。任何对宽度和高度有效的值   属性被接受。首选大小为0必须具有单位   避免被解释为灵活性。省略时默认为0％。

因此，当您将其初始化为flex: 1时，它会将其创建为flex: 1 1 0%，因为如果省略这些值，则这些是默认值。

Answer 3

您问为什么在检查器中看不到跨浏览器规范。因为您的浏览器“看到”了所有属性但只使用了适合它的属性，所以其他道具将被忽略，因此不会呈现，也不会在检查器中看到。检查员只显示渲染内容。

在样式表中删除出现在类名末尾但在属性的左括号前面的冒号。

你想要达到什么目的？从.flex1和.flex2中设置的道具，我假设你需要2个div，一个是另一个的两倍。喜欢这个？

你需要将它们包装在一个flex容器中;类似于：

CodePen Example Here

#flexWrapper {
  display: flex;
  flex-flow: row;
  width: 15em;
  height: 7em;
  border: 2px solid red;
  background: Silver;
}
.flex1 {
   flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   -moz-flex: 1;
   background: Yellow;
 }

 .flex2 {
   flex: 2;
   -webkit-flex: 2;
   -ms-flex: 2;
   -moz-flex: 2;
   background: Green;
 }