[分享]css两个块元素底端对齐

CSS中，块元素的排列是根据box model来决定的。每个元素都有一个padding、边框和外边距，这在排列时要特别注意。经常会出现两个块元素在排列时，一个元素的底部与另一个元素的顶部无法对齐的情况...

CSS中，块元素的排列是根据box model来决定的。每个元素都有一个padding、边框和外边距，这在排列时要特别注意。经常会出现两个块元素在排列时，一个元素的底部与另一个元素的顶部无法对齐的情况。下面介绍如何使用CSS让这些元素底端对齐。

.container {
  display: flex;
  align-items: flex-end;
}
.item {
  background-color: #ccc;
  padding: 10px;
  margin: 10px;
} 

使用flexbox布局是最简单的实现方法，只需将容器设置为flex，并设置align-items为flex-end。这样容器内的元素就会在垂直方向上居中对齐。需要注意的是，元素的margin不计入height属性，因此需要将margin值计算在高度内。

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(200px, auto);
}
.item {
  background-color: #ccc;
  padding: 10px;
  margin: 10px;
} 

使用CSS grid布局也可以实现底部对齐。将容器设置为grid布局，并设置grid-template-columns为1fr，即使用一个等分的列，并将grid-auto-rows设置为minmax(200px, auto)，即设置行的最小高度为200px，最大高度自适应。这样就可以实现底部对齐。