Javascript 使用jQuery设置FlexCSS

我正在尝试将图像容器的flex css属性设置为图像的纵横比。我希望flex css的格式为

flex:1.798245

，没有px或1 1px

使用jQuery css（）方法，它会一直将其设置为

flex:1.798245px

//gallery flex
$('.gallery-item').each(function(){
  var value = $("img", this).width() / $("img", this).height();
  $(this).css("flex", value);
});

---

如何将值传递给css（）以获得所需的结果？

在

值

变量之后添加

px

$('.gallery-item').each(function(){
  var value = $("img", this).width() / $("img", this).height();
  $(this).css("flex", value); // You had used `:` but should be `,` to separate two arguments.
});

这样设置

 $(this).css("flex", value);

---

您所需要的相当于设置flex grow属性：

因此，您可以直接设置flex grow属性：

---

$（this.css（'flex'，value+'10%'））；

Flex grow等与width不同。如果您想要

width

…使用它。我正在尝试实现这一点：您看到的值是

Flex

规则的完整正确语法：。这没有什么问题。如果您的代码没有按预期工作，那么还有另一个问题需要解决，因为没有

gallery item

在发布的代码中，不清楚这是如何工作的，因此我决定删除我的答案。在我的答案中的一条评论中，你告诉我flex grow版本在Safari中不起作用，所以这里有一条，没有脚本，…那么这在Safari中不起作用吗？…如果你想知道为什么基于脚本的版本不起作用，发布一个包含jQuery脚本的代码片段，我来看看；“当我想要的是

style=“flex:1.7982456140350878；“

没有

px

和没有

11

问题中的

：

是个错误！我看到了我的错误，但正如上面给出的答案所示，

style=“1 1 1.7982456140350878px；“

当我想要的是

style=“flex:1.7982456140350878；“

没有

px

和没有

11

为什么设置

flex grow

不会给我相同的结果：啊，显然你也需要设置flex-shrink和flex-basis属性，所以你可以执行

$（this）.css（'flex'，value+'10%”）

因为flex shrink和flex basis的默认值分别为1%和0%，这已经足够有趣了！出于某种原因，

$（this）.css（'flex'，value+'1 0%'）

可以工作，但是在我的css文件中设置flex shrink和flex basis，那么flex通过javascript增长就不起作用了。