Question

我正在努力使用Flexbox在Angular 4 w / Angular Material中对齐项目。我想完成如附件＃1中所示的布局，其中第一张卡位于顶部，第二张卡位于组件内容的底部。组件本身应占据屏幕上其余部分的高度（设备高度减去工具栏高度）。

附件＃2显示了我迄今为止所取得的成就。以下HTML标记和CSS显示附件＃2背后的代码。

谁能告诉我这是怎么回事？我不想乱用固定位置或其他任何东西，我想实现一个与Angular Material兼容的解决方案，并且不会影响其他组件的布局。

提前致谢！

附件＃1：

附件＃2：

HomeComponent的HTML标记：

<div id="home-content"> 
  <mat-card id="title-card">
    <mat-card-title>Lorem.</mat-card-title>
    <mat-card-content>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis magnam sint accusamus facere ducimus modi non voluptates consectetur exercitationem ullam.</mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-header>
      <img mat-card-avatar src="http://lorempixel.com/200/200" alt="">
      <mat-card-title>Lorem, ipsum dolor.</mat-card-title>
      <mat-card-subtitle>Lorem ipsum dolor sit amet consectetur adipisicing elit.</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate repellat animi reiciendis eius mollitia totam sint natus hic unde iusto.</mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="primary">Challenge!</button>
    </mat-card-actions>
  </mat-card>
</div>

对应的CSS代码：

div#home-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 3px solid black;
    justify-content: space-between;
}

Answer 1

使用height的百分比时，每个父级，一直到html/body，也需要一个。

一种选择是使用视口单元，因此从height: 100%更改为height: 100vh，#home-content将填充视口。

div#home-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;                        /*  changed  */
    border: 3px solid black;
    box-sizing: border-box;               /*  added, to avoid scroll and make
                                              border size be included in set height  */
}

另一种方法是将其父级设置为display: flex; flex-direction: column，然后删除height: 100%并添加flex-grow: 1，#home-content将填充其父级。

div#home-content {
    flex-grow: 1;                         /*  added  */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 3px solid black;
}

Answer 2

@LGSon：谢谢你的回答。我就像你说的那样做了，并使父容器也成为了一个flex容器。现在它可以工作，但我不确定它是否会影响不需要这种布局的其他组件中的其他布局。

对于其他可能遇到同样问题的人来说，CSS代码对我有用。在屏幕截图＃1中，您可以看到所有相关元素的彩色边框结果。再次感谢@LGSon提示：

html, body {
    margin: 0;
    height: 100%; // html and head must be 100% height in order to make that work
}

app-root {
    height: 100%; // app-root needs to be 100% too
    display: flex; // make the app-root a flex container
    flex-direction: column; // flex-direction is column so that the toolbar is above the component's content
}

md-toolbar {
    flex-grow: 0; // if there is more space in height than needed toolbar won't grow
}

app-root > *:nth-child(3) { // the third child of app-root contains the component's content. The first child is the toolbar, the second one is the empty router-outlet element. Perhaps this is different in your HTML structure. 
    border: 3px solid black;;
    flex-grow: 1;
    display: flex; // is also a flex container with just one item which is div#home-content
}

div#home-content {
    align-self: stretch; // use the whole space available in height
    border: 3px solid greenyellow;
    display: flex; // is a flex-container too so that the cards can be aligned accordingly
    flex-direction: column;
    justify-content: space-between; // space-between is responsible for the first card to be at the top and the second card to be at the bottom
}

屏幕截图＃1：

全内容高度＆amp;使用Flexbox对齐卡

2 个答案: