html - 对齐底部在 flex box 中不起作用

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

首先，要使元素底部对齐，正确的方法是 align-items: flex-end; 我还在 .child 上声明了 display:flex;，并给它一个宽度。

.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%;
}

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