角度4 flexbox垂直对齐和嵌套容器中的布局

Question

试图模拟将在项目中使用的实际布局。想法是允许NESTED容器，有些是行和其他列。

灰色（最右边）是包含一行的最外面的面板。 该行包含左边空白栏（绿色）和主显示栏（棕褐色）。 主显示器（列）包含一个由两个项目组成的标题行，左侧和右侧菜单项的相对大小不同。 显然这是一个问题：右侧包裹。另一个是对齐项目不是集中左侧的标题。

很抱歉的长度，我下调，就像我可以：

<!-- 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> 

我下定决心要全面了解Flexbox的。在此先感谢您的帮助。 Yogi

Answer 1

您的标题栏丢失display: flex，这就是为什么它的孩子包裹。 align-items对齐弹性盒的子元素。但是您的菜单div被宣布具有相同的高度50px，因此它们会自动居中。我创建了一个修复问题的plunker。

您还可以从不是弹性容器的元素（它们不是display: flex）中移除与柔性版面相关的属性（flex-direction,align-items）。