CSS ボタンを縦並びにしたい（ボタンの大きさは文字幅に応じたままで）

Question

htmlで作成したaタグにCSSでボタンの装飾を付けました。
そのままでは横並びになるので、親要素に

.btn-wrapper {
  display: inline-flex;
  flex-direction: column;
}

として縦並びにしましたところ、縦並びにはなりましたが、ボタン幅が揃ってしまいました。
（下の幅が大きい方に揃ったのですが、本当はそれぞれのテキストに合わせた幅のボタンを縦並びにしたいのです。）

その原因がわかる方いらっしゃいますでしょうか？

以下記述したコードです。

      <div class="btn-wrapper">
        <a class="btn-1" href="#">テスト</a>
        <a class="btn-2" href="#">テストテストテスト</a>
      </div>

.btn-wrapper {
  display: inline-flex;
  flex-direction: column;
}

.btn-1 {
  text-decoration: none;
  background-color: #EC84A0;
  color: #FFFFFF;
  border-radius: 32px;
  box-shadow: 3px 3px 10px #00000029;
  font-size: 16px;
  padding: 15px 30px;
  margin-bottom: 12px;
}

.btn-2 {
  text-decoration: none;
  background-color: #FFFFFF;
  color: #EC84A0;
  border-radius: 32px;
  box-shadow: 3px 3px 10px #00000029;
  border: 2px solid #EC84A0;
  font-size: 16px;
  padding: 15px 30px;
  margin-bottom: 70px;
}

（ちなみにbtn-wrapperの上の層にはコンテナ幅を決めるdivと、コンテンツ名のついたdivがあります。）

今回はbtn-1のみwidthとheightを付け、するとテキストが中央が外れてしまったので、line-heightでボタンのタテ中央へ調整、ボタン自体も中央から外れてしまったのでmargin: 0 auto;で中央へ、という方法を取りましたが力技のような気がしてなりません…。

今回はflex-directionを使用しましたが、もっとスマートな方法があるのでしょうか？
アイデアをお持ちの方はご教示いただけると幸いです。宜しくお願いいたします。

Answer 1

これでどうでしょう。

.btn-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: start; /* ADD */
}
```**動くサンプル：**[https://jsfiddle.net/py5oLwnc/](https://jsfiddle.net/py5oLwnc/)

Comments

[yamahaggy]

ご回答ありがとうございます。

ご提案の記述で試したところ、ボタンの幅がそれぞれのテキストに応じた幅になりました！
今回は中央揃えにしたかったので値をcenterにさせていただきました。
align-itemsは頭になかったので大変勉強になりました。

align-itemsを自分なりに調べたところ「flexアイテムの揃え方向を指定するもの」という認識なのですが、なぜ揃え方向を指定することで、ボタンの幅がテキストにフィットするようになったのかが理解できません…。

もしご教示いただけるのであれば、お手数ですがご返答いただけると幸いです。

[kei344]

デフォルト値がnormalなので、その動作をしています。（詳しくはMDNおよび仕様を確認してみてください）

【align-items - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/align-items

[yamahaggy]

なるほど！デフォルト値のnormalだとああなるのですね！
言語化して理解するのは難しいですが、貼っていただいたURLがとても分かりやすかったです。丁寧なご回答をいただき誠にありがとうございました！