flexboxとmargin: auto;を使ってレイアウトを組んでみよう

  • このエントリーをはてなブックマークに追加

レイアウトを組むのに便利な『flexbox』
今回は『flexbox』『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。

左に3つの要素、右に1つの要素を置きたい

このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。
ただその分余計な囲みが増えてしまう、ということでもあります。

そのため一番最後の要素(右側)の要素に対して『margin-left: auto;』を指定するとここだけ一番右側に寄ってくれます。

HTML


CSS


どうしてこんな動作を…?というとものすごく簡単にいうと余分なスペースを占有するように『margin: auto;』が自動的に調整してくれるみたいです。


左に1つの要素、右に3つの要素を置きたい

こちらの場合、今度は『margin-right: auto;』を指定します。

HTML


CSS




左右と中央、それぞれに要素を置きたい

左右に要素を置いて、中央に一つ要素を置くというレイアウトも中央の要素に『margin: auto;』を指定することで実現できます。

HTML


CSS


中央に『margin: auto;』を指定することでこのような一見特殊そうなレイアウトもできました。
ちなみに中央要素の右側の要素のmarginは余計な隙間ができるので0を指定してください。


flexboxとmargin: auto;を使えば、少ないコードでいろいろなレイアウトが実現できます。
ぜひ使ってみてください。

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

マークアップ

『toggleClass』を使ったアコーディオンを作る(heightでアニメーションが効かないのを解決)

jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 目次1 『slideToggle』を使ったアコーディオン2 『toggleClass』を使ったアコーディオン(ただの表示・非表示)3 『togg […]

マークアップ

レスポンシブサイトでjavascript(jQuery)の読み込みを切り替えよう

2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 目次1 ①画面サイズで切り分ける方法2 ②端末(UA)で切り分ける方法 ①画面サイズで切り分ける方法 $(function () { if (window. […]

マークアップ

【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 目次0.1 元のコード1 解決方法1.1 修正したコード 元のコード HTML <div class=”flexBox”> <p>テキストを上下中央寄せにしたい</p> </div> CSS .flexBox { display: flex; align-items: cen […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。