css top bottom两端对齐

CSS是前端开发中不可缺少的一部分，它可以让我们的网页变得更加美观和专业。其中布局问题是开发中最常见的难题之一，特别是在top和bottom两端对齐时。下面就让我们一同探讨如何解决这个问题。

.top-bottom-align-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.top-item {
  align-self: flex-start;
}

.bottom-item {
  align-self: flex-end;
}

通过上述代码，我们采用了flexBox布局，其中包括两个关键属性：justify-content和align-self。

首先，我们设定了包含top和bottom元素的容器的display属性为flex，使其具有弹性布局的特性；flex-direction属性为column，表示主轴方向为竖直方向，这样top和bottom，就可以利用主轴方向的弹性分别向上和向下发展；justify-content属性被设置为space-between，该属性可以在容器内均匀分配子元素之间的空间，并且让顶部元素自动向上对齐，底部元素自动向下对齐，从而达到了顶部对齐和底部对齐的效果。

其次，我们给top和bottom元素分别设置一个align-self属性。顶部元素的align-self被设定为flex-start，表示其在交叉轴方向上靠近容器的起点对齐；底部元素的align-self被设置为flex-end，表示其在交叉轴方向上靠近容器的终点对齐。

最后，我们可以通过优化上述代码来适应需要。通过这种方法，我们可以让网页布局更加美观和尽善尽美。