ヘッダーでよく見るレイアウトの作り方（Flexboxとmargin:autoを使用）
：左右に離れたレイアウトを作ります。Flexboxを使えば簡単にできるので、ぜひお試しください。
目次
今回作るもの
画像のような よく見るレイアウトです。片方にロゴがあり、反対側にメニューが並んでいます。この左右に別れたレイアウトを作る方法も複数ありますが、今回はFlexboxを使い HTMLもシンプルになるように作ります。
実装方法
ベースになるHTML・CSSはこちらです！
<header> <div>Logo</div> <div>Menu01</div> <div>Menu02</div> <div>Menu03</div> </header>
header div{
display:flex;
/* 下記は装飾部分です。なくてもOK */
padding: 10px;
border: 1px solid #333;
background: pink;
}
はじめに
まず、headerタグにFlexを使って、divを横並びにします。
header{
display:flex;
}
その２
１番目のdiv（Logo）に対して、「margin-right:auto;」をかけます。
すると、左右に離れました。もう、ほぼ完成です‥！
header div:first-child{
margin-right:auto;
}
その３
必要に応じて 余白など微調整して完成です。
header div{
margin-left: 10px;
}
header div:first-child{
margin-left: 0;
}
完成ソースコード
<header> <div>Logo</div> <div>Menu01</div> <div>Menu02</div> <div>Menu03</div> </header>
header{
display:flex;
}
header div{
display:flex;
/* ▼装飾など */
margin-left: 10px;
padding: 10px;
border: 1px solid #333;
background: pink;
}
header div:first-child{
margin-right:auto;
/* ▼装飾など */
margin-left: 0;
}
今回のポイント＆まとめ
コーディングの流れをみていきましたが、ポイントは「marginに対してautoをかける」ことです！
中央寄せでよくみる「margin: 0 auto;」これと同じです！これが、Flexboxにもかけれるというのが一番大事だと思います。
また、このやり方が一番良いかは 状況によると思いますが、よければ試してみてくださいね。
もしピンと来てない方は、こちらの記事も合わせて読んでみてください♪
参考記事