Flexboxの利用 - Flexbox を利用した段組みの作成 - CSS

CSSのFlexbox を利用して段組みのレイアウトを作成するコードを紹介します。

概要

Flexboxを利用すると、CSSにシンプルな設定をするだけで段組みのレイアウトを作成できます。この記事ではFlexboxを利用したCSSのコードを紹介します。

コード例1

コード

下記のコードを記述します。

SimpleFlexbox.css

.container {
    display:flex;
}

.frame1 {
    border:1px solid #ff0000;
    flex:1;
}
.frame2 {
    border: 1px solid #ff6d00;
    flex: 2;
}
.frame3 {
    border: 1px solid #ff9c00;
    flex: 3;
}
.frame4 {
    border: 1px solid #ffd300;
    flex: 4;
}

SimpleFlexbox.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleFlexbox.css" />
</head>
<body>
  <div class="container">
    <div class="frame1">1番目のコンテンツ</div>
    <div class="frame2">2番目のコンテンツ</div>
    <div class="frame3">3番目のコンテンツ</div>
    <div class="frame4">4番目のコンテンツ</div>
  </div>
</body>
</html>

解説

HTML部分は div枠の中に4つのdiv枠のあるHTMLファイルです。
コンテンツの枠を包含する親のdiv枠のスタイルに display:flex を指定します。この指定により内部の枠が Flexbox の配置となります。
内部の枠には順番にflex:1, flex:2, flex:3, flex:4 を指定しています。 flex プロパティは flex-grow flex-shrink flex-basis を一括で指定するプロパティです。
flexプロパティに数値を設定した場合、その数値の割合を幅とする枠の表示になります。今回のコードの場合、一番左の枠の幅を1とすると2番目の枠の幅が2、3番目の枠の幅が3、4番目の枠の幅が4となります。

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。
1番目のコンテンツ、2番目のコンテンツ、3番目のコンテンツ、4番目のコンテンツの枠の幅が、1:2:3:4 の比率で表示されることが確認できます。

ウィンドウの幅を縮めると、ページ幅全体も縮まります。それぞれの枠の幅も縮まりますが、枠ごとの幅の比率は変わらず維持されます。

コード例2

下記のコードを記述します。

SimpleFlexbox-2column.css

.container {
    display:flex;
}

.frameLeft {
    border:1px solid #005bff;
    flex: 1;
}
.frameRight {
    border: 1px solid #288700;
    flex: 1;
}

SimpleFlexbox-2column.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleFlexbox-2column.css" />
</head>
<body>
  <div class="container">
    <div class="frameLeft">左側のコンテンツ<br />あいうえお<br />かきくけこ</div>
    <div class="frameRight">右側のコンテンツ<br />ABCDE<br />FGHIJK</div>
  </div>
</body>
</html>

解説

コンテンツの枠を包含する親のdiv枠のスタイルに display:flex を指定し内部の枠を Flexbox表示にします。
左側のコンテンツ枠、右側のコンテンツ枠ともに flex: 1 を指定したため、両方の幅は1：1で同じ幅で表示されます。

表示結果

HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。左側のコンテンツ枠と右側のコンテンツの枠の幅の比が1:1となるため、左右の枠が同じ幅で表示される動作となります。

コード例3

下記のコードを記述します。

SimpleFlexbox-3column.css

.container {
    display:flex;
}

.frameLeft {
    border:1px solid #e9006b;
    flex: 1;
}

.frameCenter {
    border: 1px solid #0158c2;
    flex: 4;
}

.frameRight {
    border: 1px solid #d44100;
    flex: 1;
}

SimpleFlexbox-2column.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleFlexbox-3column.css" />
</head>
<body>
  <div class="container">
    <div class="frameLeft">左側のコンテンツ<br />あいうえお<br />かきくけこ</div>
    <div class="frameCenter">中央のコンテンツ<br />αβγ<br /></div>
    <div class="frameRight">右側のコンテンツ<br />ABCDE<br />FGHIJK</div>
  </div>
</body>
</html>

解説

コンテンツの枠を包含する親のdiv枠のスタイルに display:flex を指定し内部の枠を Flexbox表示にします。
左側と右側のコンテンツ枠に flex: 1 を指定し、中央の枠に flex: 4 を指定することにより、左側:中央:右側の枠の幅が 1:4:1 の比率で表示されます。