1

コンテンツをレンダリングした後、フレックスボックスの正確な幅を取得するのに問題があります。私はWindows 8アプリケーションに取り組んでいます（ie10特定のものを意味します）。

コードは次のとおりです:
[HTML] 

<html>
<head>
    <title>flexbox test</title>
</head>
<body>
    <div class='container'>
        <div class='viewport'>
            <div class='canvas'>
                <div class="item"> A </div>
                <div class="item"> B </div>
                <div class="item"> C </div>
                <div class="item"> D </div>
                <div class="item"> E </div>
                <div class="item"> F </div>
                <div class="item"> G </div>
                <div class="item"> H </div>
                <div class="item"> I </div>
                <div class="item"> J </div>
            </div>
        </div>
    </div>
    <hr style="width: 600px; text-align: left;">
    <div class="outbox"></div>
    <script>tester();</script>
</body>
</html>​

[CSS]

.container {
    width: 400px;
    height: 200px;
    border: 1px solid black;
}

.container .viewport {
    width: inherit;
    height: inherit;
    position: absolute;
    overflow: auto;
}

.container .viewport .canvas{
    display: -ms-flexbox;
    -ms-flex: 0 0 auto;
    -ms-flex-pack: start;
    -ms-flex-flow: row none;
    -ms-flex-align: start;
    -ms-flex-item-align: start;
    -ms-flex-line-pack: start;
    position: relative;
}

.container .viewport .canvas .item {
    width: 100px; height: 100px;color: #fff; 
    background-color: black;
    margin: 10px;
}

[JAVASCRIPT] 

(function tester(){
    var canvas = document.querySelector('.canvas');
    var style = document.defaultView.getComputedStyle(canvas, null);
    function addToOutbox(str){
        var outbox = document.querySelector('.outbox');
        outbox.innerText = 'Width: ' + str;
    }
    addToOutbox(style.width);
})();

スクロールバーがあるので、幅が違うと思っていました。外側のコンテナの幅は400px、中間のものは継承widthさheightれoverflow: auto、最も内側は拡張可能です。フレックスボックスには、それぞれ幅と高さを持つ 8 つの項目があります100px。だから私はフレックスボックスの幅を期待していました900px (i.e. 100px*8 + margin-left and margin-right for each item)が、それでも400px親の寸法だけを取得しています。何か不足していますか？

JS Fiddle へのリンクは次のとおりです: http://jsfiddle.net/pdMSR/ [ie10 でのみ開く]

4

1 に答える 1

3

要素は実際には 400px です。400px を超えて配置されたフレックス アイテムは、実際にはオーバーフローしています。

本当に取得しようとしているのは scrollWidth のようです。関数に渡すと、canvas.scrollWidth探しaddToOutboxているものが得られます。

于 2012-09-26T17:41:52.383 に答える