弯曲时伸展的不需要的内容物

Question

正如你在下面看到的，当我使用flex时，按钮被强制占用每个高度，这使得它看起来很奇怪。将它保持垂直居中并且不伸展的方法是什么？

.x {
  display: flex;
  justify-content: space-between;
}

.y {
  font-size: 66px;
}

.z {
  border: none;
  color: white;
  background: #333;
  border-radius: 50px;
}

<div class='x'>
  <div class='y'>
    HEYYYYYAAAA
  </div>
  <button class='z'>
    Click
  </button>
</div>

Answer 1

尝试使用：

.x {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.y {
  font-size: 66px;
}

.z {
  border: none;
  color: white;
  background: #333;
  border-radius: 50px;
  height: 100%;
}

这里的重要部分是：

align-items: center;

这会沿水平轴设置元素。

身高：100％不一定是必需的，但如果你没有align-items: center;设置就行了。