底部对齐在弹性盒中不起作用

Question

我正在尝试将页脚底部对齐，在顶部保留空格。但不起作用。有人可以帮助我知道正确的方法吗？

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  align-items:bottom;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

Answer 1

在此示例中，您的.child还需要拥有display: flex，而.footer也需要align-items: bottom。

为什么？这实际上是多个嵌套的flex布局。

Answer 2

首先，要使项目与底部对齐，正确的方法是const bRetSpec: boolean = this.specBalanceRequest(request); // remove `await` const bRetPtm: boolean = this.ptmBalanceRequest(request); // remove `await` if (!bRetPtm && !bRetSpec) { return Promise.reject(new Error("Processing failed")); } try { const __data: IResponse = await makeRequest(this._request); // the two promise calls, I guess can be move to be inside promise.all return await Promise.all([anotherPromiseData0, anotherPromiseData1]); } catch (err) { return Promise.reject(err); } // make it non promise private specBalanceRequest(@Body() request: ExpressRequest): void { const specUrl = "/payments"; const reqObject = RequestResponseHandler.processRequest(request.body, specialtyUrl); this._request.push(reqObject); } // make it non promise private ptmBalanceRequest(@Body() request: any): void { const careURL = "/Order"; const reqObject = RequestResponseHandler.processRequest(request.body, careURL); this._request.push(reqObject); } 我还在align-items: flex-end;上声明了display:flex;，并给了它一个宽度。

.child

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  width: 33.333%;
  align-items: flex-end;
}
.footer{
  background:#808080;
  width: 100%;
}

Answer 3

根据您提供的代码。这可能是一种解决方案。

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  display: inline-flex;
  align-items: flex-end;
  flex-direction: row;
}
.footer {
  display: inline-block;
  width: 100%;
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

但是以更优化的方式。让我向您展示另一个示例：

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  flex: 1;
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

如果您不想更改HTML标记并使用与问题中相同的标记，则可以采用第一个解决方案。否则，第二个会更好。

Answer 4

从.child删除行高，并为.parent添加高度。

已更新：

.parent {
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
  height: 100px;
}

.child {
  border: 1px solid green;
  flex: 1;
  align-items:bottom;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>