角度4のフレックスボックスの垂直配置とネストされたコンテナのレイアウト

Question

プロジェクトで使用される実用的なレイアウトをモックしようとしています。アイデアはネストされたコンテナを許可することです、いくつかは行と他の列です。

灰色がかった（右端）は、一番下の行を含む最も外側のパネルです。 この行には、左余白の列（緑色）とメインの表示列（tan）が含まれています。 メイン表示（列）には、左右のメニュー項目の相対サイズの異なる2つの項目で構成されるヘッダーの行が含まれています。明らかに1つの問題があります：右側が折り返されます。もう一つは、align-itemsが左のタイトルを中央揃えしていないということです。

長さのため申し訳ありませんが、私は私ができる限りトリムダウン：

<!-- panel --> 
<div 
     [ngStyle]="{ 
     'width': '80vw', 
     'height': '100vh', 
     'background-color':'beige', 
     'border':'1px solid red', 
     'display': 'flex', 
     'flex-direction': 'row' 
     }" 
     > 
    <!-- left margin column --> 
    <div 
     [ngStyle]="{ 
     'flex-direction': 'column', 
     'border':'1px solid green', 
     'background-color': 'lightgreen', 
     'width': '5%' 
     }" 
     > 
    margin 
    </div> 
    <!-- main panel --> 
    <div 
     [ngStyle]="{ 
     'flex-direction': 'column', 
     'border':'1px solid brown', 
     'background-color': 'wheat', 
     'width': '85%' 
     }" 
    > 
    <!-- title bar --> 
    <div 
     [ngStyle]="{ 
     'flex-direction': 'row', 
     'border':'1px solid blue', 
     'background-color': 'white', 
     'width': '100%', 
     'height': '50px', 
     'align-items': 'center' 
     }" 
     > 
     <!-- left title/menu items --> 
     <div 
     [ngStyle]="{ 
      'border':'1px solid blue', 
      'background-color': 'white', 
      'width': '80%', 
      'flex-grow': '1', 
      'flex-shrink': '5', 
      'height': '50px', 
      'margin-left': '10px', 
      'align-items': 'center' 
      }" 
     > 
     left side title vertically centered?? 
     </div> 
     <!-- right side menu items --> 
     <div 
     [ngStyle]="{ 
      'border':'1px solid blue', 
      'background-color': 'lightgray', 
      'width': '10%', 
      'flex-grow': '1', 
      'flex-shrink': '1', 
      'height': '50px', 
      'align-items': 'center' 
      }" 
     > 
     right side vertically centered 
     </div> 
    </div> 
    </div> 
</div> 

私は完全にフレキシボックスを理解することが決定したんです。あなたの助けを前にありがとう。 Yogi

Answer 1

タイトルバーが表示されないdisplay: flexですalign-itemsはフレックスボックスの子要素を揃えます。しかし、あなたのメニューdivは、同じ高さの50pxと宣言されているので、それらは自動的にセンタリングされます。問題を解決するplunkerを作成しました。

フレックスレイアウトに関連する属性（flex-direction、align-items）をフレックスコンテナでない要素から削除することもできます（これらはdisplay: flexではありません）。