angular 4 flexbox在嵌套容器中的垂直对齐和布局

Question

尝试模拟将在项目中使用的实用布局。想法是允许嵌套容器，有些是行，有些是列。

浅灰色（最右边）是包含一行的最外面的面板。该行包含左边距列（绿色）和主显示列（棕褐色）。主显示（列）包含 header 的一行，由左右菜单项的两个相对大小不同的项目组成。显然这是一个问题：右侧包裹。另一个是 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>

我决心完全理解 FlexBox。在此先感谢您的帮助。瑜珈

Answer 1

您的标题栏丢失 display: flex，这就是它 children 换行的原因。 align-items 对齐弹性框的 children 个元素。但是您的菜单 div 被声明为具有与 50px 相同的高度，因此它们会自动居中。我创建了一个 plunker 来解决问题。

您还可以从非弹性容器（它们不是 display: flex）的元素中删除弹性布局相关属性（flex-direction、align-items）。

angular 4 flexbox在嵌套容器中的垂直对齐和布局

angular 4 flexbox vertical alignment and layout in nested containers

html

css

nested-forms

flexbox

angular