web-dev-qa-db-ja.com

Flexbox=列の重複

フレックスボックスを使用して、WinJSのグループ化されたリストビューを模倣しようとしています。サイズを変更するときに列が重なることを除いて、私は近づいています（私は思う）.

http://jsfiddle.net/w8ts4Lnx/5/

アイテムがグループ内にとどまり、グループが水平に成長するようにします。

body {
    height: 100%;
    display: flex;
    flex-flow: column wrap;
}

h1 {
   padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: column wrap; 
    max-height: 600px;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    width: 200px;
}

私が欠けているものはありますか？

flexbox
13
martian

コンテンツがコンテナをオーバーフローさせたくない場合は、flex-shrink: 0;を指定する必要があります

flex-shrinksource

この「番号」コンポーネントは、フレックス収縮のロングハンドを設定し、フレックスシュリンクファクターを指定します。これは、負の空きスペースが分散されたときに、フレックスコンテナ内の残りのフレックスアイテムに対してどれだけ収縮するかを決定します。省略すると、1に設定されます。負のスペースを分配するとき、フレックス収縮率にフレックス基底が乗算されます。

私はwinJSを使用したことがないので、模倣しようとしているwinJSの動作はわかりませんが、これはあなたが達成しようとしている適切な動作に近いと思います： http://jsfiddle.net/w8ts4Lnx/11 /

34
Flowers

内容が収まらないため、列が重なります。アイテムはグループに収まらないため、フローオーバーします。これを解決するには、group-divにoverflow-strategyを指定する必要があります。「overflow」で最後の1つを指定します。

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden;
}

デフォルトはvisibleです。詳細はこちら： http://www.w3schools.com/cssref/pr_pos_overflow.asp

hidden以外のオプションがあります。垂直/水平スクロール、またはその両方を設定できます。目的の「WinJSのグループ化されたリストビュー」により近いものを選択してください。試してください：

overflow-x: scroll;
overflow-y: auto;

または

overflow-y: auto;
overflow-x: scroll;

ハッピーコーディング！

3
wojjas

これは、重複する列を修正する正しい答えです：

.flex-container {
   display: flex;
   flex-flow: column;
}

.flex-item {
   flex: 1 0 auto;
}
1
user3376065

少し遅れているかもしれませんが、この問題を扱っていたコードペンを作成しました。おそらく、この質問を読んでいる人々に役立つでしょう。

html

<body>
  <div class="test-container">
    <div class="item item1">
      item1
    </div>
    <div class="item item2">
      item2
    </div>
    <div class="item item3">
      item3
    </div>
  </div>
</body>

css（scss）

.test-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 50%;
  background-color: red;
  padding-left: 2rem;

  .item {
    opacity: 0.6;
    height: 100px;
    width: 100px;
    flex-basis: 100px;
    margin-left: -2rem;
  }

  .item1 {
    background-color: cyan;
    z-index: 10;
  }

  .item2 {
    background-color: blue;
    color: red;
    z-index: 20;
  }

  .item3 {
    background-color: black;
    z-index: 30;
    color: white;
  }
}

https://codepen.io/Garma/pen/ZZmNWg?editors=11

乾杯

1
Garma

flexboxで動的に決定したいので、幅を設定しない方が良いと思います。それを削除し、最初のグループを増やすためにflexを追加しました。

http://jsfiddle.net/mspriyakk/vv3tfrtv/3/

#content > .group:nth-of-type(1) {
    flex-grow: 2;   
}
#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}
1
mspriyakk

「グループを水平に成長させる」-.groupで「行」としてフレックス方向を使用する必要があり、＃content内でグループをラップする必要があります。そうしないと、グループは重複しなくなります。

http://jsfiddle.net/gafcvq9b/2/

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: row wrap; 
    max-height: 600px;    
}
1
Ĭsααc tիε βöss

私は同様の問題に直面し、私の場合、修正はコンテナのスタイルの高さ設定を削除していました。これにより、ブラウザーの高さが変化してもコンテナーのサイズを大きくすることができました。

0
Craig Tanaka