Flexboxを使ったレイアウト

レイアウト

多くのWebサイトでは、表示するコンテンツを見やすくするため、レイアウトを整えています。 例えば、2カラム型のレイアウトだったり、タイル型のレイアウトだったりと、要素を縦に並べたり横に並べたりしています。

レイアウトを整える方法は様々ありますが、ここではFlexboxと呼ばれる仕組みを使いレイアウトを整えていきます。 それでは、Flexboxの基本的な使い方から順番に確認していきましょう。

Flexbox

Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。

基本的な使い方

Flexboxの基本的な使い方を確認していきます。 Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

まずは、Flexコンテナを設定してみます。 Flexコンテナとして扱いたいHTMLタグに対して、次のようなCSSを設定します。

.flex-container {
    display: flex;
}

また、Flexコンテナ内に並んでいる要素は自動的にFlexアイテムとして扱われます。 そのため、明示的にCSSを設定する必要はありません。

そして、FlexコンテナとFlexアイテムが識別しやすいようCSSで装飾しておきます。

.flex-container {
    display: flex;
    background-color: skyblue;
    width: 512px;
    height: 512px;
}
.flex-item {
    background-color: royalblue;
    width: 64px;
    height: 64px;
    margin: 16px;
}

flex-direction

Flexアイテムを縦・横どちらの方向に並べるかを指定するには、flex-directionプロパティを使います。 例えば、縦方向にする場合はflex-direction: column;とします。 また、Flexアイテムを並べる方向を「主軸」と呼び、主軸に対して垂直方向の軸を「交差軸」と呼びます。

内容
row横方向
row-reverse横方向(逆順)
column縦方向
column-reverse縦方向(逆順)
.flex-container {
    display: flex;
    flex-direction: column;
}

flex-wrap

Flexアイテムの折返しを指定するには、flex-wrapプロパティを使います。 例えば、折返しありにする場合はflex-wrap: wrap;とします。

内容
nowrap折返しなし
wrap折返しあり
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

justify-content

Flexアイテムの主軸に対する配置方法を指定するには、justify-contentを使います。 例えば、中央寄せにする場合はjustify-content: center;とします。

内容
flex-start先頭寄せ
flex-end末尾寄せ
center中央寄せ
space-between均等配置(アイテム間に余白)
space-around均等配置(アイテム・コンテナ間に余白)
.flex-container {
    display: flex;
    justify-content: flex-end;
}

align-items

Flexアイテムの交差軸に対する配置方法を指定するには、align-itemsを使います。 例えば、中央寄せにする場合はalign-items: center;とします。

内容
flex-start先頭寄せ
flex-end末尾寄せ
center中央寄せ
.flex-container {
    display: flex;
    align-items: center;
}

align-content

Flexアイテムが折返した時に交差軸に対する配置方法を指定するには、align-contentを使います。 例えば、中央寄せにする場合はalign-content: center;とします。

内容
flex-start先頭寄せ
flex-end末尾寄せ
center中央寄せ
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

ページレイアウト

Webサイトのページとして使われるレイアウトは様々な種類があります。 ここでは、2カラム型・タイル型のレイアウトを作成してみます。

2カラム型のレイアウト

サイドナビとメインコンテンツが左右に並ぶ、2カラム型のレイアウトを作成します。 サイドナビとメインコンテンツそれぞれをFlexアイテムとし、横方向に並べます。

Flexコンテナとして扱うためdisplay: flex;を設定します。 そして、Flexアイテムを横方向に並べる場合はflex-direction: row;を設定します。

例として次のようなHTML・CSSで2カラム型のレイアウトを作成できます。 ここではサイドナビの横幅を固定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="charset" content="UTF-8" />
    <title>2カラム型</title>
    <style type="text/css">
        p {
            height: 900px;
        }
        .flex-container {
            display: flex;
            flex-direction: row;
        }
        .flex-item-nav {
            width: 256px;
            margin-right: 8px;
            background-color: skyblue;
        }
        .flex-item-main {
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item-nav">
            <p>サイドナビ</p>
        </div>
        <div class="flex-item-main">
            <p>メインコンテンツ</p>
        </div>
    </div>
</body>
</html>

タイル型のレイアウト

要素を折返して並べる、タイル型のレイアウトを作成します。 Flexアイテムを左右に並べ、折返しを有効にします。

Flexアイテムを横方向に並べる場合はflex-direction: row;を設定します。 そして、Flexアイテムの折返しを有効にする場合はflex-wrap: wrap;を設定します。

例として次のようなHTML・CSSでタイル型のレイアウトを作成できます。 ここではFlexアイテムのサイズを固定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="charset" content="UTF-8" />
    <title>タイル型</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .flex-item {
            width: 256px;
            height: 256px;
            margin: 8px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://placehold.jp/600x400.png">
    </div>
    <div class="flex-container">
        <div class="flex-item">
            <p></p>
        </div>
        <div class="flex-item">
            <p></p>
        </div>
        <div class="flex-item">
            <p></p>
        </div>
        <div class="flex-item">
            <p></p>
        </div>
        <div class="flex-item">
            <p></p>
        </div>
        <div class="flex-item">
            <p></p>
        </div>
    </div>
</body>
</html>