web-dev-qa-db-ja.com

Angular 2 flex-layout height 100％

マテリアルデザインとフレックスレイアウトを使用した角度アプリ。 https://github.com/angular/flex-layout

画面上部に2列（左=塗りつぶし、右= 10％）のシンプルなページレイアウトを作成し、続いて画面下部に1行を作成しようとしています。要素はまだ、コンテンツに必要な垂直方向のスペースのみを埋めています。これを行うことがわかった唯一の方法は、高さを手動で100％に設定することです。それは私がそれをしなければならない方法ですか？このHTMLの何が問題になっていますか？

<div fxLayout="column">
  <div fxLayout="row" fxFlex="90%">
    <div fxFlex="80%" class="border">
      <p>Stuff is happening here</p>
    </div>
    <div fxFlex="20%" class="border">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </div>
  <div fxLayout="row" fxFlex="10%" class="border">
    <p>Bottom element</p>
  </div>
</div>

結果：

enter image description here

angularflexboxmaterial-design
13
Ryan Langton

高さを100％に設定することは、おそらく実際の方法です。高さは動的なので、コンテンツに適応します。あなたの場合、コンテンツはページを埋めませんので、それは通常の動作です。

このソリューションの何が問題になっていますか？

5
Alexandre Couret

同様の問題があり、CSSプロパティを手動で調整することなく、ライブラリFlexLayoutの属性fxFlexFillを使用することで、より一貫した方法で解決したため、私はこの質問につまずいたばかりです。特定のケースでは、次のように最初のdiv要素に属性fxFlexFillを含めます。

<div fxLayout="column" fxFlexFill>
    ...
</div>

これがお役に立てば幸いです。マッシ

3
Massimiliano Porrini

Angular 7でこれを実行しようとしている人のために、Flexを使用して可能な出力を以下に示します。イラストからの質問は、必要な出力について混乱しているtdです。 3つのシナリオすべて、出力のスナップショット、および試用できるstackblitzプレイグラウンドを作成します。

1番目のケース下のdivは残りの高さで埋められ、テキストは下に揃えられます。 1st Case - https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

それがあなたが望んでいるものである場合、コードで必要な唯一の変更は下のdivセクションです

<div fxFlex fxLayoutAlign="start end" class="bottom-div">
    BOTTOM ELEMENT: This div is filled and text is aligned in the end
</div>

2番目のケース1番目と同様。しかし、テキストは中央に揃えられます Case2: https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

<div fxFlex fxLayoutAlign="start center" class="bottom-div">
BOTTOM ELEMENT: This div is filled and text is in center
</div>

3番目のケース下部のdiv自体は下部に揃えられ、残りの垂直方向のスペースを埋めません。

Case3 https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html それがあなたが求めているものである場合、ここに変更があります：

<div fxFlex="20" fxLayoutAlign="start center" class="bottom-div">
    BOTTOM ELEMENT: This div is just 20 and aligned to the bottom
</div>

Stackblitz Playgroundhttps://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

それを訪れた誰かがAngularの新しいバージョンを助けるかもしれません。

0
sandiejat