CSS实现Flexbox元素分顶部、中部、底部对齐（无多余间隙）

利用Flex布局中margin:auto自动填充剩余空间的特性，无需额外嵌套容器，就能实现三类元素的精准对齐：

h2,h3 { padding:0; margin:0; border-top:1px solid gray }
.flex { height: 100%; min-height:460px; 
    display: flex; justify-content: flex-end; flex-direction: column; width:320px; }

/* 让.top组顶对齐 */
.top:first-of-type {
  margin-top: auto;
}
/* 让.mid组精准居中 */
.mid:first-of-type {
  margin-top: auto;
}
.mid:last-of-type {
  margin-bottom: auto;
}
/* 确保.btm组底部无多余边距 */
.btm {
  margin-bottom: 0;
}

逻辑说明 #

• .top:first-of-type设置margin-top:auto，会自动填充容器顶部到第一个.top元素的所有空白，让整个.top组无多余边距地贴在顶部。
• .mid组通过首尾元素的上下auto margin，把容器内.top组下方、.btm组上方的剩余空间均分，从而让.mid组精准居中，而非仅占据剩余空间的中间区域。
• .btm组依托容器默认的justify-content:flex-end保持底部对齐，margin-bottom:0消除可能存在的默认边距。

原HTML结构无需修改，直接使用即可。

内容的提问来源于stack exchange，提问作者prakash