flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方

ずっとできなかった、２つの要素をひとまとめにすることができました…！私はずっとメニューバーの左にlogo、右にメニューを置きたかった！

まずHTML　↓

<nav>
<div class="inner flex">
<div class="logo">
<a>FRUITS!</a>
</div>
<div class="menu">
<ul class="flex">
<li><a href="">apple</a></li>
<li><a href="">grape</a></li>
<li><a href="">orange</a></li>
</ul>　</div>　</div>
</nav>

コツはセレクタの範囲をちゃんと理解してマークアップすることです。ロゴ部分とメニュー部分分けるのはもちろん、細かくセレクタいれる。私は作りたいサイトの構造上以下で作ったよー

<header id="head">
<nav>
<div class="inner flex">
<div class="brand-logo">
<h2><a href="#front">portforio</a></h2>
</div>
<div class="grobal-nav">
<ul class="flex">
<li><a href="#front">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>　</div>　</div>　</nav>　</header>

#navの使い方とid 、classの使い分けは勉強が必要だなぁ…

この"brand-logo"と"grobal-nav"を一列にしまーす

*{
border: 0;
margin: 0;
padding: 0;
}
nav{
background-color:#FFBD4C;
height:50px;
}
.inner{
max-width:100%;
margin:0 auto;
width:980px;
}
nav>.flex{
align-items: center;
height:50px;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex li{
margin-left:30px;
list-style:none;
}
.logo a{
color:white;
font-size:20px;
font-weight:bold;
}
li a{
color:white;
text-decoration:none;
}

太文字部分のflexboxを使って横並びにしました。

ちなみに<div class="inner flex">はinnerとflexで分けてセレクタとして扱うことができるみたいなので、

.flex {
display: flex;
justify-content: space-between;
}

このCSSには、
<div class="inner flex">
<ul class="flex">
上記２箇所をflexboxに指定したことになります。

ついで、navのflexとかlogo、listを装飾して完了！

結構苦労しましたが、一応私は以下の通りCSS組みました。。。

h2 a {text-decoration: none; color: black; line-height: 2.5; letter-spacing: 1.5px}

nav {
background-color: white;
height: 55px;
}

.inner {
max-width:100%;
margin:0 auto;
width:980px;
}

nav > .flex {
align-items: center;
height:60px;
}

.flex {
display: flex;
justify-content: space-between;
}

.flex li {
margin-left:30px;
list-style:none;
}

.flex li a {
text-decoration: none;
color: black;
line-height: 2.5;
letter-spacing: 1.5px
}

太文字のところが反映されなくてちょっと試行錯誤してなんとか自分のやりたかったデザインができました。。。

いやーメニューバーだけでこんなに苦戦するとは。。。苦笑　モチベーション担保が大変ですわ。。ある程度やりたいことできたらCMSで作ろう・・・絶対その方が楽。

参考にしたサイトは以下です

【html.css】flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方を解説するよ | ずくろぐ