フレックスボックスを使ってみよう

親要素にdisplay:flex;で横並び

flex:1;と指定すると
１つ目のボックスが伸びて、なおかつブラウザの幅に合わせて柔軟に幅が変わる。

要素の並び、揃えを制御しよう

【flex-direction】主軸の方向を決める（主軸↓　交差軸→)

・flex-direction:row　初期値で、左から右

・flex-direction:row-reverse 右から左

・flex-direction:column 左から右（交差軸が反対）

・flex-direction:column-reverse　左から右かつ下から上（主軸も反対）

【justify-content】
主軸に沿って要素をどうそろえるか

・justify-content：flex-start　初期値　左揃え

・justify-content：flex-end　右揃え

🌟justify-content：center　中央ぞろえ

🌟justify-content：space-between　余白が均等に揃えられる

【align-items】
交差軸に沿って要素をどうそろえるか(交差軸に余裕があるときのみ)

・align-items:flex-start　上ぞろえ

・align-items:flex-end　下ぞろえ

🌟align-items:center　中央ぞろえ

alignがついていたら交差軸に対しての操作

flex-wrap, align-contentを使おう

【flex-wrap】
並べたい要素の幅がコンテナの幅を超えるときに使う

・flex-wrap:nowrap　デフォルト

🌟flex-wrap:wrap　コンテナの幅を超えたときに折り返す

・flex-wrap:wrap-reverse 交差軸の向きが反対になる

【align-content】（交差軸に余裕があるときのみ）

・align-content:flex-start　上ぞろえ

・align-content:end　下ぞろえ

🌟align-content:center　中央ぞろえ←wrapで折り返したときに使う

・align-content:space-between　余白均等

🌟align-contentとalign-itemsは
基本的には交差軸方法の揃えで同じ。flex-wrap: wrapを指定して、実際にflex itemが折り返されたときのみ、違いが出る。

それから
flex-directionとflex-wrapは、flex-flowというプロパティで一括指定できる。

ー－－flex itemー－－

align-self,orderを使ってみよう

【align-self】
flex-start,end,center

【order】
ボックスの順番を指定する
初期値は０のため、order:1とすると
最後に並べられる。

flex-basisでサイズを決めよう🔽

flex-basisは　flex-grow,flex-shrinkでの計算で使われる

width＝flex-basis

でもwidthよりflex-basisの方が優先される

flex-grow,flex-shrinkを理解しよう

🌟ボックスにそれぞれflex-grow:1;をつけることで
余白を均等にできる！

🌟ボックスにそれぞれflex-shrink:1;をつけることで
はみ出した場合に均等に縮めることができる！

flexプロパティを使ってみよう🔽

縦方向に要素を配置してみよう

❕縦方向のflexアイテムではmarginの相殺が起きない

##ヘッダーレイアウトを作ってみよう
１．親要素のhederにdisplay:flexを指定してロゴとlistを横並びにする。
２．ロゴは左側、リストは右側にするために
　　✅justify-content：space-betweenとする。もしくは
　　✅margin-left:autoと指定する。

横並びメニューを作ってみよう

３．ulにdisplay:flexを指定して横並びにする。
４．感覚が狭いためliのaにwidthを指定。text-align:center;を指定。
５．inlineでwidthが効かないため、display:block;を指定。
６．同じくaにロゴと高さを合わせるためにline-heightを指定。
７．a:hoverでクリックしやすくする。

画像とテキストを配置してみよう

画像はwidthで絶対配置、テキストはflex:1で可変配置する。

画像を左右に振り分けてみよう

nth-child(even)に対して
flex-direction:row-reverse;で偶数行のみ左に配置。

画像とテキストの間を均等に分けるために
column-gap:10px; をつける。

フレックスボックス