CSS 2カラムレイアウトを作る flexbox/固定幅/可変幅

CSSのflexを使ってブログやサイトででよくある2カラムのレイアウトを作ります。
レスポンシブ対応のサンプルです。

1. 固定幅2カラム

See the Pen
flex layout
by kura (@kuranopen)
on CodePen.

HTML

<div id="contents">
  <main id="main">固定幅</main>
  <div id="sub">固定幅</div>
</div>

CSS

#contents {
  width: 600px; /*幅指定*/
  margin: 0 auto;
  display: flex;
}
#main {
  width: 400px;
}
#sub {
  width: 200px; /*幅指定*/
}

@media screen and (max-width: 767px) {
  #contents {
    width: 100%;
    display: block;
  }
  #main {
    width: 100%;
  }
  #sub {
    width: 100%;
  }
}
  • #main#subwidthを指定
  • flexbox#contentsに子要素のwidthの合計値を指定

2. 可変幅+固定幅2カラム

See the Pen
flex layout
by kura (@kuranopen)
on CodePen.

デモは左カラムが可変幅、右カラムが固定幅です。
ブラウザの幅を縮めてみてください。

HTML

<div id="contents">
  <main id="main">可変幅</main>
  <div id="sub">固定幅</div>
</div>

CSS

#contents {
  width: 100%; /*幅指定*/
  display: flex;
}
#main {
  width: 100%;
  flex: 1;
}
#sub {
  width: 200px; /*幅指定*/
}

@media screen and (max-width: 767px) {
  #contents {
    display: block;
  }
  #main {
    width: 100%;
  }
  #sub {
    width: 100%;
  }
}

  • 固定したいカラムにwidthを指定
  • 可変幅にしたいカラムにflex: 1を指定
  • 可変幅を常にいっぱいまで幅を使用するためwidth: 100%を指定

3. 可変幅+固定幅2カラム (最大幅あり)

See the Pen
flex layout
by kura (@kuranopen)
on CodePen.

HTML

<div id="contents">
  <main id="main">可変幅(最大幅あり)</main>
  <div id="sub">固定幅</div>
</div>

CSS

#contents {
  width: 100%;
  display: flex;
  justify-content: center;
}
#main {
  max-width: 400px;
  flex: 1;
}
#sub {
  width: 200px; /*幅指定*/
}

@media screen and (max-width: 767px) {
  #contents {
    width: 100%;
    display: block;
  }
  #main {
    max-width: 100%;
  }
  #sub {
    width: 100%;
  }
}

#contents flexbox親要素

  • width: 100%で最大まで幅を使用
  • justify-content: centerで中央寄せ

#main メインカラム

  • max-width: 400pxで最大幅を指定
  • flex: 1で可変幅にする

#sub サブカラム

  • width: 200pxで幅を指定

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

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

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。