1

Windows 8ストアアプリで水平方向に柔軟な画面を作成しようとしています。いくつかのグループが水平方向に伸びており（外側のFlexboxに含まれています）、グループの下のさまざまなフィールドが垂直方向にリストされ、必要に応じて画面の下から上に折り返されます。 （一連の内部フレックスボックスに含まれています）。これは、グループ化されたWindows 8 ListViewに似たレイアウトですが、単一のデータアイテムに関連するフィールドを表示しており、特定のセクションにページの他の場所にListViewが含まれるため、リストビューを使用してデータを表示できません。

内側のフレックスボックスセクションが新しい列に折り返されるたびに問題が発生しました。折り返しフレックスボックスの後に配置されたフレックスボックスは、前のセクションの列幅ではなく、1列幅離れて表示されます。これは、次のスクリーンショットに示されています。

フレックスボックスをどのように見せたいかではありません

私が考えていたものとはまったく異なります！以下のようになります（オーバーフローのあるセクションに手動でマージンを設定して作成します）。

大幅に改善されたフレックスボックス

このページのHTMLは次のとおりです。

<section aria-label="Main content" role="main">            

  <div class="main-container">  

    <div id="n1" class="inner-container">
      <div class="element"></div>
      .. And so on

そしてCSSに関しては：

.test section[role=main] {    
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

.main-container {
    display: -ms-flexbox;
    /*We will put a slight margin at the bottom of the page to keep elements from appearing too low*/
    height: calc(100% - 60px);
}

.inner-container {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    margin-right: 50px;
}

.element {
    border:solid;
    width:150px;
    height:150px;
}

#n1 .element {
    background-color:red;
}

#n2 .element {
    background-color:green;
}

#n3 .element {
    background-color:blue;
}

#n4 .element {
    background-color:goldenrod;
}

私が持っているフレックスボックスのセットアップで2番目の写真で私が目指していたものを達成する方法はありますか？そうでない場合は、ページ上のコンテンツを必要な範囲で水平方向に実行できるようにする別の方法はありますか？グリッドビューのように流動的で柔軟なアプリにしたいのですが、先ほど申し上げたように、それを使用することはできません。

4

2 に答える 2

1

これは私が使用することになった最後の方法です：

var groups = document.querySelectorAll(".inner-container");

for (var i = 0; i < groups.length; i++) {
  var group = groups[i];
  //The scroll width is the width of the actual content of our flex box. 
  //If we set the div's CSS width to the scroll width, the box will push other flex box elements correctly.
  group.style.width = group.scrollWidth + "px";
}

ほとんどの場合、これでうまくいくと思いますが、私以外では実際にテストしていません。繰り返しになりますが、誰かがより良い解決策を持っているなら、見るのは面白いでしょう！

于 2012-09-20T17:20:04.280 に答える
0

私の問題は、高さと狭くなるcontentBoxを取得したことでした。

私の解決策：

var groups = element.querySelectorAll('.contentBox');
for (var i = 0; i < groups.length; i++) {
    var group = groups[i];
    var tempwidth = 0;
    while (group.childNodes[1].scrollHeight > group.scrollHeight) {
        tempwidth = tempwidth + 100;
        group.childNodes[1].style.width = tempwidth + 'px';
    }
}
于 2013-04-11T09:13:53.407 に答える