我试图创建一个按钮，具有相同的风格作为一个锚标记。
但是，我注意到锚标记的宽度是父标记的全宽，而添加display: flex时按钮的宽度只是其内容的宽度

const App = () => {
  const buttonRef = useRef();
  return(
    <div className="box">
      <a className="link" href="/blah">hey</a>
      <button
        onClick={() => {
          console.log(buttonRef.current);
        }}
        ref={buttonRef}
        className="link">
          Special Button
       </button>
    </div>
  );
}

CSS：

.link {
  display: flex;
  justify-contents: center;
  align-items: center;
  background-color: grey;
}

为什么它们有相同的样式却有不同的宽度？
下面是我的codepen使用react：https://codepen.io/edmundmai/pen/qBRewxX