web-dev-qa-db-ja.com

フレックスエレメントにフレックスシュリンクが適用されるのはどのような場合ですか？

私はこの素敵な CSS Flexboxデモページ で遊んだことがあり、ほとんどの概念を理解していますが、flex-shrink 仕事で。ここで適用する設定に関係なく、ページに違いはありません。

spec から：

<「フレックスグロー」>

このコンポーネントは、「フレックスグロー」のロングハンドを設定し、フレックスグローファクターを指定します。これにより、正の空きスペースが配分されたときに、フレックスコンテナー内の残りのフレックスアイテムと比較してフレックスアイテムがどれだけ大きくなるかが決まります。省略すると、「1」に設定されます。

<「フレックスシュリンク」>

このコンポーネントは、「フレックスシュリンク」のロングハンドを設定し、フレックスシュリンク係数を指定します。これは、負の空きスペースが分配されたときに、フレックスコンテナー内の残りのフレックスアイテムと比較してフレックスアイテムがどれだけ縮小するかを決定します。省略すると、「1」に設定されます。負のスペースを分配する場合、フレックス収縮係数はフレックス基準で乗算されます。

どのような状況でflex-shrink適用されますか（つまり、負のスペースが分散されている場合）？ flexbox要素に幅を設定し、その中の要素の（min-）widthsを設定してカスタムページを試してみましたが、オーバーフローが発生しましたが、説明されているケースではないようです。

すでにサポートされていますか？

解決策として、リンクされたデモの一連のオプション、またはJSFiddleのようなライブデモのいずれかが高く評価されます。

cssflexbox
40
jakub.g

見るためにflex-shrink実際には、コンテナを小さくできる必要があります。

HTML：

<div class="container">
  <div class="child one">
    Child One
  </div>

  <div class="child two">
    Child Two
  </div>
</div>

CSS：

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.child.one {
  flex: 1 1 10em;
  color: green;
}

.child.two {
  flex: 2 2 10em;
  color: purple;
}

この例では、両方の子要素が10em幅であることが理想的です。親要素の幅が20emより大きい場合、2番目の子は、1番目の子の2倍の余ったスペースを取って、大きく表示されます。親要素の幅が20em未満の場合、2番目の子の最初の子の2倍の部分が削られ、小さく見えます。

現在のflexboxサポート：Opera（接頭辞なし）、Chrome（接頭辞付き）、IE10（接頭辞付き、ただし少し異なるプロパティを使用）名前/値）。Firefoxは現在2009年の古い仕様（接頭辞付き）を使用していますが、新しい仕様は現在実験的ビルドで利用できるようになっています（接頭辞なし）。

39
cimmanon