IE10, IE11, Chrome, Firefox で正しく動く例
CSS
.flex-box {
flex: 1 1 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1px;
}
JavaScript
$('.flex-box').css('flex'); // 取得
$('.flex-box').css('flex', '1 1 1px'); // 変更
IE10 だけ動かない例
IE11, Chrome, Firefox は正しく動きます。
JavaScript
// 取得
$('.flex-box').css('flex-grow');
$('.flex-box').css('flex-shrink');
$('.flex-box').css('flex-basis');
// 変更
$('.flex-box').css('flex-grow', 1);
$('.flex-box').css('flex-shrink', 1);
$('.flex-box').css('flex-basis', 1);
IE10 だけ JavaScript から flex-grow, flex-shrink, flex-basis プロパティの取得・変更ができないようです。
JavaScript
console.log(document.body.style);
上記のコードで有効なスタイルを列挙してみましたが確かに IE10 だけ flex-grow, flex-shrink, flex-basis がありませんでした。
対応策
JavaScript
// 取得
var grow = $('.flex-box').css('flex').split(' ')[0];
var shrink = $('.flex-box').css('flex').split(' ')[1];
var basis = $('.flex-box').css('flex').split(' ')[2];
// 変更
$('.flex-box').css('flex', grow + ''); // grow を変更
$('.flex-box').css('flex', basis); // basis を変更
$('.flex-box').css('flex', grow + ' ' + basis + 'px'); // grow と basis を変更
$('.flex-box').css('flex', grow + ' ' + shrink); // grow と shrink を変更
$('.flex-box').css('flex', grow + ' ' + shrink + ' ' + basis + 'px'); // すべて変更
これなら IE10, IE11, Chrome, Firefox で正しく動きます。
CSS プロパティが正しく動くのに JavaScript から同じプロパティが動かないなんて思わなくてだまされた。