I"m trying to set the flex css property of image containers to the aspect ratio of the image. I want the flex css to be in form flex: 1.798245 with no px or 1 1 1px.

Using jQuery css() method it keeps setting it to flex: 1 1 1.798245px

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

How should I pass value to css() to get the result I want?

I"m trying to set the flex css property of image containers to the aspect ratio of the image. I want the flex css to be in form flex: 1.798245 with no px or 1 1 1px.

Using jQuery css() method it keeps setting it to flex: 1 1 1.798245px

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

How should I pass value to css() to get the result I want?

• javascript
• jquery
• css
• flexbox

• Flex-grow etc are not the same as width. If you want width...use that. – Paulie_D Commented Oct 9, 2017 at 9:56
• stackoverflow./questions/34733955/… – Paulie_D Commented Oct 9, 2017 at 9:57
• I'm trying to acplish this: codepen.io/blimpage/pen/obWdgp – Ralphonz Commented Oct 9, 2017 at 10:02
• 1 The value you're seeing is the full correct syntax for the flex rule: developer.mozilla/en-US/docs/Web/CSS/flex. There is nothing wrong with this. If your code is not working as you expect there is another issue which needs addressing – Rory McCrossan Commented Oct 9, 2017 at 10:03
• Since there is no gallery-item in the posted code, it is unclear how this is suppose to work, and therefore I decided to deleted my answer. In a ment at my answer you told the flex-grow version doesn't work in Safari, so here is one, w/o the script, codepen.io/anon/pen/VMXEbO ... so doesn't that work in Safari? ... And if you want to know why the script based doesn't work, post a code snippet that includes the jQuery script and I'll have a look. – Asons Commented Oct 9, 2017 at 12:59

3 Answers 3

what you want is equivalent to setting the flex-grow attribute:

so what you can do is just set the flex-grow attribute directly:

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

Set it like this

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

Add px after value variable

$('.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.
});