使用 jQuery 设置 flex css答案

【问题标题】：Setting flex css with jQuery使用 jQuery 设置 flex css
【发布时间】：2018-03-20 11:51:47
【问题描述】：

我正在尝试将图像容器的 flex css 属性设置为图像的纵横比。我希望 flex css 的格式为 flex: 1.798245，没有 px 或 1 1 1px。

使用 jQuery css() 方法将其设置为flex: 1 1 1.798245px

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

我应该如何将值传递给 css() 以获得我想要的结果？

【问题讨论】：

Flex-grow 等与宽度不同。如果你想要width...使用它。
stackoverflow.com/questions/34733955/…
我正在努力做到这一点：codepen.io/blimpage/pen/obWdgp
您看到的值是flex 规则的完整正确语法：developer.mozilla.org/en-US/docs/Web/CSS/flex。这并没有错。如果您的代码未按预期工作，则需要解决另一个问题
由于发布的代码中没有gallery-item，因此不清楚这是如何工作的，因此我决定删除我的答案。在我回答的评论中，您告诉 flex-grow 版本在 Safari 中不起作用，所以这里有一个，没有脚本，codepen.io/anon/pen/VMXEbO ......所以那不起作用在 Safari 中？ ...如果您想知道为什么基于脚本的脚本不起作用，请发布包含 jQuery 脚本的代码 sn-p，我会看看。

标签： javascript jquery css flexbox

【解决方案1】：

在value变量之后添加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.
});

【讨论】：

我看到了我的错误，但是上面的答案给了我style="flex: 1 1 1.7982456140350878px;"，而我想要的是style="flex: 1.7982456140350878;"，没有px，也没有1 1

【解决方案2】：

这样设置

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

【讨论】：

这给了我style="flex: 1 1 1.7982456140350878px;"，而我想要的是style="flex: 1.7982456140350878;"，没有px，也没有1 1
问题中的: 有误！

【解决方案3】：

你想要的就相当于设置了flex-grow属性：

所以你可以直接设置 flex-grow 属性：

$(this).css('flex', value + ' 1 0%');

【讨论】：

为什么设置flex-grow 没有给我同样的结果：codepen.io/blimpage/pen/obWdgp
啊显然你还需要设置 flex-shrink 和 flex-basis 属性，所以你可以这样做 $(this).css('flex', value + ' 1 0%') 因为 flex-shrink 和 flex-basis 默认值分别是 1 和 0%
有趣的是，它奏效了！出于某种原因$(this).css('flex', value + ' 1 0%') 有效，但在我的 css 文件中设置 flex-shrink 和 flex-basis 然后通过 javascript 进行 flex-grow 不起作用。