我試圖將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
等?
我試圖將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
等?
我認爲你需要在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"
});
到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%
,因爲這些都是默認的,如果省略值。
但是,我應該使用像'2'這樣的數字值還是像'「2」'這樣的字符串? – Jacobian
你問你爲什麼沒有在你的檢查員看到跨瀏覽器的規格。因爲您的瀏覽器「看到」所有屬性,但只使用適合它的屬性,所以其他道具將被忽略,因此不會呈現,也不會在檢查器中看到。檢查員只顯示呈現的內容。
在你的樣式表中刪除出現在類名尾部但在屬性的左括號之前的冒號。
你想達到什麼目的?從.flex1和.flex2中設置的道具,我假設你需要2個div,其中一個是另一個的兩倍。喜歡這個?
#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;
}
工程。謝謝! – Jacobian