中央配置にする
要素を中央配置にする方法です。
display: flex; でフレックスボックスを設定します。
justify-content: center; で横幅に対して中央にします。
align-items: center; で縦に対して中央にします。
上記２つを組み合わせることで、要素の中央揃えができます。
ヘッダーレイアウト
画像とメニューが横並びのヘッダーレイアウトをつくりましょう。
headerにdisplay: flex;を指定します。
headerがflex container（親要素）です。
imgやnavは、flex-item（子要素）です。
navに対して、margin-left: auto;を指定すると、メニューが右寄せになります。（空白がメニュー左に指定されたため）
さらに、nav ul にも、display: flex;を指定します。
nav ul がflex container（親要素）です。
liやaは、 flex-item（子要素）となり、横並びになりました。
nav aに対して、widthやline-heightを設定すると、リンクが押しやすくなるのでgoodです。
aタグはinline要素なので、そのままでは幅や高さが設定できません。
aタグに対して、display: block; を設定すると、幅や高さも設定できるようになります。
aタグは押しやすいように、ブロック要素にして幅と高さを設定するのがおすすめです。
コメント