使用flex在窗口底部放置一个元素或一个盒子

Question

使用flexbox，如何将.bottom div移动到窗口底部？ flex-direction的{​​{1}}为.boxContainer，因此所有内容都可以垂直移动。我尝试了column和align-self: flex-end，但两者都是水平推动，而不是垂直推动。我希望有人可以帮我解决这个问题。

＆＃13;

＆＃13;

align-self: baseline

＆＃13;

.boxContainer {
	width: 100vw;
	height: 100vh;
	background: peachpuff;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.center {
	width: 300px;
	height: 150px;
	background: honeydew;
}

.bottom {
	width: 300px;
	height: 50px;
	background: cyan;
	align-self: flex-end;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将justify-content更改为space-between，它应该为您完成。

如果您不需要向上推中心div，您可以将margin-top auto设置为中心和底部div。

.boxContainer {
  width: 100vw;
  height: 100vh;
  background: peachpuff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.center {
  width: 300px;
  height: 150px;
  background: honeydew;
  margin-top: auto;
}
.bottom {
  width: 300px;
  height: 50px;
  background: cyan;
  margin-top: auto;
}

<div class="boxContainer">
  <div class="center"></div>
  <div class="bottom"></div>
</div>

Answer 2

尝试在align-self: flex-end;课程上使用align-content: flex-end;添加margin-top: auto替换.bottom。

＆＃13;

＆＃13;

.boxContainer {
	width: 100vw;
	height: 100vh;
	background: peachpuff;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.center {
	width: 300px;
	height: 150px;
	background: honeydew;
}

.bottom {
	width: 300px;
	height: 50px;
	background: cyan;
	align-content: flex-end;
    margin-top: auto;
}

＆＃13;

<div class="boxContainer">
	<div class="center"></div>
	<div class="bottom"></div>
</div>

＆＃13;

＆＃13;

＆＃13;