Выровнять дно не работает в 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

Удалить высоту строки из .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>

Answer 2

Прежде всего, чтобы выровнять элементы по дну, правильный путь будет 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%;
}

<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 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 также нужно иметь display: flex, а .footer нужно align-items: bottom.

Почему? На самом деле это несколько вложенных гибких макетов.