40

私はこの素晴らしいCSSFlexboxデモページで遊んだことがあり、ほとんどの概念を理解していますが、仕事で見ることができませんでしたflex-shrink。そこで適用する設定が何であれ、ページに違いは見られません。

スペックから：

<'flex-grow'>

このコンポーネントは、「flex-grow」をロングハンドで設定し、フレックス成長係数を指定します。これは、正の空き領域が分散されたときに、フレックスコンテナ内の残りのフレックスアイテムと比較してフレックスアイテムがどれだけ成長するかを決定します。省略した場合は「1」になります。

<'flex-shrink'>

このコンポーネントは、「flex-shrink」をロングハンドで設定し、フレックス収縮係数を指定します。これは、負の空き領域が分散されたときに、フレックスコンテナ内の残りのフレックスアイテムに対してフレックスアイテムがどれだけ収縮するかを決定します。省略した場合は「1」になります。負のスペースを分散する場合、フレックス収縮係数はフレックスベースで乗算されます。

どのような状況flex-shrinkで適用されますか（つまり、ネガティブスペースが分散されている場合）？フレックスボックス要素の幅とその中の要素の（最小）幅を設定してオーバーフローを作成するカスタムページを試しましたが、説明されているケースではないようです。

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

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

4

1 に答える 1

39

動作を確認するに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 番目の子は 1 番目の子の 2 倍の部分が削られ、小さく見えます。

現在のフレックスボックスのサポート: Opera (接頭辞なし)、Chrome (接頭辞付き)、IE10 (接頭辞付きですが、わずかに異なるプロパティ名/値を使用)。Firefox は現在、2009 年からの古い仕様 (接頭辞付き) を使用していますが、新しい仕様は現在、実験的なビルド (接頭辞なし) で利用できるはずです。

于 2013-01-08T22:19:26.713 に答える