【ヘッダーで便利】flexで右寄せや左寄せする方法

【ヘッダーで便利】flexで右寄せや左寄せする方法
flexを使ってヘッダーを作成すると要素の横並びに便利だけど、均等に横並びしてしまって、想い通りのレイアウトにならないなあ。横並び要素が3つ以上のときで、真ん中の要素を右か左に寄せたいけどどうやればいいんだろう?という疑問にお答えします。

flexを使ってヘッダーを作成すると要素の横並びに便利だけど、均等に横並びしてしまって、想い通りのレイアウトにならないなあ。横並び要素が3つ以上のときで、真ん中の要素を右か左に寄せたいけどどうやればいいんだろう?という疑問にお答えします。

flexを使って横並びは便利だけど、要素の配置が自動的すぎて、自分で調節したいけど分からなくて調べたら、案外カンタンに調節できたので、右寄せ、左寄せする方法をご紹介します。

flaotプロパティを使えば解決できそうだけど、2019年の今となっては少々古臭くなってきた感がありますね。

それでは、flexを使って横並びした要素を右寄せまたは左寄せする方法をみていきましょう。

※この記事は秒速で読み終わります。

1.flexで単に横並びさせる

justify-content: space-between;

として、まず均等に横並びさせてみます。

すると、画像のようにbox1、box2、box3が均等に横並びになります。

justify-content: space-between;として、まず均等に横並びさせてみます。すると、画像のようにbox1、box2、box3が均等に横並びになります。
boxが均等に並んでいる

ここから、例えば真ん中にあるbox2を左に寄せたいとき、左に寄せる方法をみてみましょう。

2.真ん中の要素を左または右に寄せる方法

実はカンタンです。まずは左に寄せる方法からみてみましょう。

box2に対して、

「 margin-right : auto ; 」

の指定を追記するだけでbox2が左に寄ります。

box2に対して、「 margin-right : auto ; 」の指定を追記するだけでbox2が左に寄ります。
box2が左に寄っている

逆に、box2を右に寄せたい場合は「 margin-left : auto ; 」を指定するとokです。

あと、隣り合うbox2とbox1の間隔を調節したいときは、box1のmarginなどで調節するとokですね。

超カンタンですね。とても気軽に使えると思うので、使うシーンがあったらぜひ使ってみてください。

コメント

タイトルとURLをコピーしました