【週刊ドットインストール】 256timesのクラスを準備中、Ruby/Ruby on Railsのロードマップページを追加
2:17の所でロゴとダウンロードボタンのレイアウトを調整する際に align-items; center; を使用することに関する質問です。
align-items; center;
この align-items;center; を使用する前、 つまりは header.container に display: flex; を使用しただけの状態の時、
align-items;center;
header.container
display: flex;
添付のように、ダウンロードボタンは header.container の高さいっぱいになっていて、 ダウンロードの文字は baseline に沿っているのか若干上に寄っています。(サイズは160*32)
baseline
ここで、 align-items;center; を使用すると <a>が8px程縮み、(サイズは160*24) 添付のようにy軸方向で中央寄せとなるのですが、
この時、ダウンロードの文字自体も<a>の中でy軸に対し中央寄せになっている(ように見える) のは何故でしょうか。
<a>
align-items; center; はFlexboxの中で、 交差軸に対し、Flex Itemsを中央寄せにするという認識でして、 あくまで <a> が中央寄せとなり、ダウンロードの文字はそのまま baseline 上に あるような若干上に寄ったまま配置されると思っていたのですが。
フレックスボックスの授業を見返したのですが 自分では解決に至らず、、 変な質問、かつ乱文で恐縮ですが、 何卒ご教授の程宜しくお願い致します。
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
2:17の所でロゴとダウンロードボタンのレイアウトを調整する際に
align-items; center;を使用することに関する質問です。この
align-items;center;を使用する前、つまりは
header.containerにdisplay: flex;を使用しただけの状態の時、添付のように、ダウンロードボタンは

header.containerの高さいっぱいになっていて、ダウンロードの文字は
baselineに沿っているのか若干上に寄っています。(サイズは160*32)ここで、

align-items;center;を使用すると<a>が8px程縮み、(サイズは160*24)
添付のようにy軸方向で中央寄せとなるのですが、
この時、ダウンロードの文字自体も
<a>の中でy軸に対し中央寄せになっている(ように見える)のは何故でしょうか。
align-items; center;はFlexboxの中で、交差軸に対し、Flex Itemsを中央寄せにするという認識でして、
あくまで
<a>が中央寄せとなり、ダウンロードの文字はそのままbaseline上にあるような若干上に寄ったまま配置されると思っていたのですが。
フレックスボックスの授業を見返したのですが
自分では解決に至らず、、
変な質問、かつ乱文で恐縮ですが、
何卒ご教授の程宜しくお願い致します。