【SCSS/CSS🔰】align-items:center;は「中央にする」ではなく「中央よせ」ボタン等の幅には注意

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

要素を縦並びにする際の注意

【HTML】
<div>
 <h2></h2>
 <p></p>
 <div>
  <a>ボタン</a>
 </div>
</div>

縦並びで全ての要素を中央配置させたいとき、display:flex; align-items:center;を使って真ん中にするが、align-items:center;は真ん中に配置しているのではなく、中央に寄せているのでボタンなどの幅が変わってしまう。（小さくなる）

そのため、ボタンの横幅を調整する必要があることを忘れずに！

width:100%;
align-self:stretch;など