Adding flex style with prefixes in jQuery

Question

I'm trying to add flex property to an object. This is how I do it:

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

However, when I check the element in DevTools Inspector, I see this style being added:

style="flex:1 1 1px"

So, I wonder where does 1 1 1px come from and why I do not see cross-browser properties -webkit-flex etc?

score 2 · Accepted Answer · edited May 23 '17 at 10:30

I think you need to add the quotes "" to all the 1.

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

It would even better to reorder the rules, prefixed ones first.

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

-moz-flex is not necessary now days.

EDIT

According to this post, newer jQuery v1.8.0+ adds vendor prefixes automatically.

Which means it can be as simple as:

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

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

according to https://developer.mozilla.org/en-US/docs/Web/CSS/flex:

/* One value, unitless number: flex-grow */ flex: 2;

Values

<'flex-grow'> Defines the flex-grow of the flex item. See for more details. Negative values are considered invalid. Defaults to 1 when omitted.

<'flex-shrink'> Defines the flex-shrink of the flex item. See for more details. Negative values are considered invalid. Defaults to 1 when omitted.

<'flex-basis'> Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.

So when you do initialize it as flex: 1, it is creating it as flex: 1 1 0%, since those are the defaults if the values are omitted.

But should I use numeric values like `2` or strings like `"2"`? — Jacobian, Oct 05 '15 at 19:46

score 0 · Answer 3 · answered Oct 06 '15 at 15:43

You asked why you don't see cross-browser specifications in your inspector. Because your browser "sees" all the properties but only uses the property that is appropriate for it, the other props are ignored, therefore not rendered and not seen in the inspector. The inspector only shows what renders.

In your stylesheet remove the colon which appears at the end of the class name but right before the opening bracket for the properties.

What are you trying to achieve? From the props set in .flex1 and .flex2, i assume you need 2 divs, one being twice as large as the other. Like this?

You'll need to wrap them in a flex container; similar to this:

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;
 }

Adding flex style with prefixes in jQuery

3 Answers3