web-dev-qa-db-ja.com

パラメータflex-growはfxFlexディレクティブでどのように機能しますか？

angular flex-layout を使用しようとしていますが、ディレクティブfxFlex、特にパラメータflex-grow。

ドキュメントは言う：

flex-grow：利用可能なスペースがある場合、flexboxアイテムが他のアイテムに比例して）どれだけ大きくなるかを定義します。flex-grow値は幅を上書きします。

したがって、次のコードを使用すると、2番目のdivは2番目の_の2倍になり、空のスペースが埋められるはずだと思いました。

<div fxLayout="row">
    <div fxFlex="2 1 30%">[flex="2 1 30%"]</div>
    <div fxFlex="1 1 40%">[flex="1 1 40%"]</div>
</div>

しかし、期待どおりに機能せず、引数flex-grow 使用されている ？

ここ は私が使用したプランカーです。

angularcssflexboxangular-flex-layout
8
JeanJacques

フレックス環境での「拡張縮小初期」から何が期待できるかについてのより多くの例については、チェックアウト このリンク を強くお勧めします。

I 分岐したプランカー 拡大縮小イニシャルの使用方法のいくつかの例。

例は次のとおりです。

1番目のボックスの幅は20％で、他の2つのボックスは残りのスペースを3分の1に分割します

2番目のボックスは3番目のボックスの半分のサイズです

  <div fxFlex="1 1 20%"></div>
  <div fxFlex="1 1 auto"></div>
  <div fxFlex="2 1 auto"></div>

スペース全体を10分の1に分割します

1st 8/10th、2nd＆3rd 1/10th

  <div fxFlex="8 1 auto"></div>
  <div fxFlex="1 0 auto"></div>
  <div fxFlex="1 0 auto"></div>

3分の1の分割スペース

2番目のサイズの2倍のサイズの最初のボックス

  <div fxFlex="2 0 auto"></div>
  <div fxFlex="1 0 auto"></div>

ドキュメントが別のことを言っていることは知っていますが、私はこれをかなり作業していて、次のことがわかりました。

  • 初期サイズを設定した場合、フレックスレイアウトは拡大または縮小しません
  • 拡大/縮小は、autoの初期サイズの他のボックスを基準にしています

Flex-Layoutは、初期値を設定するときに実際のフレックスを「1 1 1e-9」に設定します。これが、拡大縮小が影響を与えない理由です。

6
Z. Bagley