CSS Flexbox 底部布局

CSS Flexbox（Flexible Box）是一种用于Web布局的模块。它提供了一种更加灵活的布局方式，能够轻松实现水平和垂直方向上的布局。

在实现页面布局时，我们经常需要让某些元素呈现在底部。使用CSS Flexbox可以轻松实现这一任务。

要实现底部布局，我们需要将父元素设置为Flex容器，然后使用justify-content和align-items属性来控制子元素的对齐方式。

例如，下面的代码将父元素设置为Flex容器，然后将子元素垂直底部对齐：

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh; /* 父元素高度 */
}

.child {
  /* 子元素样式 */
}

这里使用了flex-direction: column将Flex容器设置为垂直方向。justify-content: flex-end将子元素垂直底部对齐。height: 100vh设置了Flex容器的高度，使其占据整个浏览器窗口。

还可以通过设置子元素的margin-top: auto属性来将其垂直底部对齐：

.container {
  display: flex;
  height: 100vh; /* 父元素高度 */
}

.child {
  margin-top: auto;
  /* 子元素样式 */
}

这里的margin-top: auto将子元素自动向底部对齐，并且在其他元素相对较小时，它们也会保持在底部位置。

总之，使用CSS Flexbox可以轻松实现各种复杂的布局。如果您需要更多关于CSS Flexbox的信息，请查看以下资源：

• CSS Flexbox 简介
• MDN文档
• Flexbox游戏