在jQuery中添加帶有前綴的flex樣式

我試圖將flex屬性添加到對象。這就是我要做的事：在jQuery中添加帶有前綴的flex樣式

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

然而，當我檢查DevTools檢查的元素，我看到被添加這種風格：

style="flex:1 1 1px"

所以，我不知道來自哪裏，以及爲什麼1 1 1px我沒有看到跨瀏覽器屬性-webkit-flex等？

來源

2015-10-05 Jacobian

我認爲你需要在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現在沒有必要了。

EDIT

根據this post，更新的jQuery v1.8.0 +自動添加供應商前綴。

這意味着它可以是簡單的：

根據

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

來源

2015-10-05 19:37:00 Stickers

工程。謝謝！ – Jacobian

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

/*一個值，無量綱數：FLEX-生長*/ 撓曲：2;

值

< '柔性成長'>定義Flex項目的彎曲生長。請參閱更多詳情。負值被認爲是無效的。省略時默認爲1 。

<'flex-shrink'>定義flex 項目的flex-shrink。查看更多細節。負值被認爲是無效。省略時默認爲1。

<'flex-basis'>定義柔性項目的基於柔性的。任何適用於寬度和高度屬性的值都將被接受。 0的首選大小必須有一個單位，以避免被解釋爲靈活性。省略時默認爲0％。

所以當你做初始化爲flex: 1，它正在創建它作爲flex: 1 1 0%，因爲這些都是默認的，如果省略值。

來源

2015-10-05 19:43:50 Jesse

但是，我應該使用像'2'這樣的數字值還是像'「2」'這樣的字符串？ – Jacobian

你問你爲什麼沒有在你的檢查員看到跨瀏覽器的規格。因爲您的瀏覽器「看到」所有屬性，但只使用適合它的屬性，所以其他道具將被忽略，因此不會呈現，也不會在檢查器中看到。檢查員只顯示呈現的內容。

在你的樣式表中刪除出現在類名尾部但在屬性的左括號之前的冒號。

你想達到什麼目的？從.flex1和.flex2中設置的道具，我假設你需要2個div，其中一個是另一個的兩倍。喜歡這個？

您需要將它們包裝在柔性容器中;與此類似：

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

來源

2015-10-06 15:43:29 kevinB

在jQuery中添加帶有前綴的flex樣式

回答

相關問題