如何让flex居中的子div点击后仅向下延展，不上下同时扩张？

父容器设置了align-items: center属性，该属性会让子元素始终在垂直方向保持居中，因此子元素高度变化时，上下两端会同步向外延伸，保证中心点位置不变，就出现了你现在看到的上下同时拉伸的效果。

下面提供两种可直接复用的修改方案：

方案1：使用绝对定位实现居中（无需修改JS代码） #

仅修改CSS部分即可，核心是固定子元素的顶部初始位置，高度变化时不会改变顶部坐标：

#div1 {
  height: 200px;
  width: 200px;
  outline: red solid medium;
  /* 新增相对定位作为子元素定位参照 */
  position: relative;
}

#div2 {
  height: 100px;
  width: 100px;
  outline: blue solid medium;
  /* 新增以下属性实现初始居中，且固定顶部位置 */
  position: absolute;
  left: 50%;
  top: 50%;
  /* Y方向固定偏移-50px，对应初始高度的一半，保证顶部始终距离父容器顶部50px */
  transform: translate(-50%, -50px);
}

原有JS代码无需修改，点击后即可实现仅向下增高的效果。

方案2：保留flex布局，点击时调整对齐规则 #

无需修改CSS代码，仅修改JS部分即可：

let div2 = document.querySelector("#div2");
div2.addEventListener("click", e => {
  div2.style.height = "300px";
  // 新增以下两行，固定子元素顶部位置
  div2.style.alignSelf = "flex-start";
  // 初始居中时子元素顶部距离父容器顶部刚好为50px，固定该边距即可
  div2.style.marginTop = "50px";
})

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