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

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

• 固定幅+固定幅2カラム
• 可変幅+固定幅2カラム
• 可変幅+固定幅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と#subにwidthを指定
• 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で幅を指定

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選