CSSのFlexbox（display:flex）の基本を理解しよう

displayプロパティ値にflexを指定すると、Flexbox（フレックスボックス）と呼ばれる機能を使うことができます。

1
2
3
セレクタ {
  display: flex;
}

Flexboxは、水平または垂直のいずれかの方向（一次元）に要素を配置し、画面幅に合わせて柔軟なレイアウトを実現できる便利な機能です。

Flexboxを使うと、要素間の余白の分配・位置合わせ・行端揃えなどが短いコードで簡単にできるようになります。

FlexコンテナとFlexアイテム

リンクをコピーしました

Flexboxを使うレイアウトでは、要素を配置させる「Flexコンテナ」という領域が必要です。Flexコンテナ内に配置された要素は、「Flexアイテム」と呼ばれます。

Flexコンテナの作り方

リンクをコピーしました

Flexコンテナを作るには、Flexboxを使ってレイアウトしたい領域の要素に対して、displayプロパティの値をflexに指定します。

次の例ではdiv要素に対して、CSSでdisplay: flexを指定したflex-containerクラスを付けて、Flexコンテナを作成します。

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

1
2
3
.flex-container {
  display: flex;
}

この指定により、flex-containerクラスを付けたdiv要素内では、Flexboxを使ってレイアウトできるようになります。

子要素は自動でFlexアイテムになる

リンクをコピーしました

Flexコンテナ直下の子要素は、自動で「Flexアイテム」になります。

次のHTMLのように、先ほどFlexコンテナを作成した要素内に子要素を追加します。
子要素は、自動的にFlexアイテムになります。

1
2
3
4
5
<div class="flex-container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1
2
3
.flex-container {
  display: flex;
}

Flexboxのデフォルト値の挙動

リンクをコピーしました

Flexコンテナを作成すると、いくつかのデフォルト値が定義されています。Flexコンテナ内のFlexアイテムは、以下のように振る舞います。

• 水平に沿って並んで表示される
• 内容に応じて、自動的に幅が指定される
• 折り返されず、1行で表示される
• 高さが1番大きいFlexアイテムに合わせて、伸縮して表示される

他にもありますが、上記の振る舞いだけを確かめてみます。

水平に沿って並んで表示される

リンクをコピーしました

次のように、CSSで親要素に指定されるdisplay: flexをコメントアウトします。div要素のdisplayデフォルト値はblockなので、子要素は上から下へと縦に並びます。

1
2
3
4
5
<div class="flex-container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1
2
3
4
5
6
7
8
9
10
.flex-container {
/*   display: flex; */
  background-color: #D6E9C1; /* 背景色を追加 */
}

 /* 子要素のスタイルを追加 */
.flex-container div {
  background-color: #8FBC54;
  border: solid #548670;
}

See the Pen Flexbox1 by miyajima yuya (@pikawaka) on CodePen.

それでは、次のようにCSSのdisplay: flexのコメントアウトを外して、Flexコンテナを作成してみます。

1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  background-color: #D6E9C1;
}

.flex-container div {
  background-color: #8FBC54;
  border: solid #548670;
}

Flexコンテナが作成されると、Flexコンテナ直下にある子要素はFlexアイテムとなります。Flexアイテムは、次の表示結果のように水平に沿って並んで表示されます。

See the Pen flexbox2 by miyajima yuya (@pikawaka) on CodePen.

自動的に幅が指定される

リンクをコピーしました

Flexコンテナ内のFlexアイテムは、Flexアイテムの内容によって自動的に幅が指定されます。

試しにFlexコンテナ直下にある子要素の内容を追加してみます。
次のように2番目の子要素の内容を追加します。

1
2
3
4
5
<div class="flex-container">
  <div>One</div>
  <div>TwoTwoTwoTwoTwoTwo</div>
  <div>Three</div>
</div>

次の表示結果のように、Flexアイテムの内容によって自動的に幅が指定されましたね。

See the Pen Flexbox4 by miyajima yuya (@pikawaka) on CodePen.

折り返されずに1行で表示される

リンクをコピーしました

Flexコンテナ内のFlexアイテムは、Flexコンテナの幅に収まらなかった場合に折り返されず、1行で表示されます。

試しにFlexコンテナに幅・高さ、Flexアイテムに高さを指定し、折り返しの振る舞いをみてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  background-color: #D6E9C1;
  display: flex;
  height: 200px;
  width: 100px;
}

.flex-container div {
  background-color: #8FBC54;
  border: solid #548670;
  height: 20px;
}

次の表示結果のように、FlexアイテムがFlexコンテナに収まらない場合は、折り返されずに1行で表示されましたね。

See the Pen Flexbox5 by miyajima yuya (@pikawaka) on CodePen.

高さが伸縮して表示される

リンクをコピーしました

Flexコンテナ内のFlexアイテムは、他のFlexアイテムの高さが大きい場合に1番大きいFlexアイテムの高さに合わせて、伸縮して表示されます。

1
2
3
4
5
<div class="flex-container">
  <div>One</div>
  <div>Two</div>
  <div>Three<br>Three<br>Three</div>
</div>

Flexアイテムに高さが指定されない場合は、以下のようにFlexコンテナの高さまでFlexアイテムが広がります。

See the Pen Flexbox3 by miyajima yuya (@pikawaka) on CodePen.

Flexboxのデフォルト値の挙動は、Flexboxに用意されるプロパティで変更することができます。次はFlexboxの基本的なプロパティを学びましょう。

Flexboxのプロパティ

リンクをコピーしました

Flexboxのプロパティには、大きく分けて「Flexコンテナに指定するプロパティ」と「Flexアイテムに指定するプロパティ」があります。

今回はFlexboxの基本的な挙動が理解できる「Flexコンテナに指定するプロパティ」について学びます。主なプロパティは、以下の通りです。

上記のプロパティは、全てのFlexコンテナに指定します。

1
2
3
4
5
<div class="flex-container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1
2
3
4
.flex-container {
  /* この中に指定する*/
  display: flex;
}

flex-direction（横並び・縦並び）

リンクをコピーしました

flex-directionプロパティは、Flexアイテムを並べる方向を指定します。

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: 値; /* Flexコンテナに指定する */
}

flex-directionプロパティで利用できる値は、以下の通りです。
各値によって、Flexアイテムが並べられる方向を画像でも確かめてみましょう。

1
2
3
4
5
6
7
8
9
10
11
/* 左から右に横並び（デフォルト値） */
flex-direction: row;

/* 右から左に横並び（rowの逆）） */
flex-direction: row-reverse;

/* 上から下へ縦並び */
flex-direction: column;

/* 下から上へ縦並び（columnの逆） */
flex-direction: column-reverse;

試しに、コードペンでFlexアイテムが並ぶ方向を確かめてみます。

次のFlexコンテナには、flex-directionプロパティが指定されてません。Flexアイテムを並べる方向は、デフォルト値であるrowが適用されるので、左から右に横並びになります。

See the Pen Flexbox6 by miyajima yuya (@pikawaka) on CodePen.

上記のCSSを編集して、Flexコンテナにflex-directionプロパティを指定してみましょう。

以下の表を参考に、flex-directionプロパティ値を変えながら、Flexアイテムの挙動を確かめてみましょう。プロパティは、.flex-container内に指定します。

flex-wrap（単一行に押し込む・複数行に折り返す）

リンクをコピーしました

flex-wrapプロパティは、Flexアイテムを単一行に押し込むか、複数行に折り返すかを指定します。

1
2
3
4
.flex-container {
  display: flex;
  flex-wrap: 値; /* Flexコンテナに指定する */
}

flex-wrapプロパティで利用できる値は、以下の通りです。
各値によって、Flexアイテムがどのように表示されるかを画像でも確かめてみましょう。

1
2
3
4
5
6
7
8
/* 単1行で配置される（デフォルト値） */
flex-wrap: nowrap;

/* 左から右へ複数行に配置される（上から下） */
flex-wrap: wrap;

/* 左から右へ複数行に折り返して配置される（下から上） */
flex-wrap: wrap-reverse;

コードペンでFlexアイテムの折り返しを確かめてみます。

次のFlexコンテナには、flex-wrapプロパティが指定されてません。デフォルト値はnowrapなので、複数のFlexアイテムは単一行で配置されます。

See the Pen Flexbox7 by miyajima yuya (@pikawaka) on CodePen.

上記のCSSを編集して、Flexコンテナにflex-wrapプロパティを指定してみましょう。

以下の表を参考に、flex-wrapプロパティ値を変えながら、Flexアイテムの挙動を確かめてみましょう。プロパティは、.flex-container内に指定します。

align-items（垂直方向に揃える位置）

リンクをコピーしました

align-itemsプロパティは、垂直方向にFlexアイテムを揃える位置を指定します。

1
2
3
4
.flex-container {
  display: flex;
  align-items: 値; /* Flexコンテナに指定する */
}

align-itemsプロパティで利用できる値は、以下の通りです。
各値によって、Flexアイテムがどのように表示されるかを画像でも確かめてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Flexコンテナの高さまで広げる（デフォルト値） */
align-items: stretch;

/* 上揃え */
align-items: flex-start;

/* 下揃え */
align-items: flex-end;

/* 中央揃え */
align-items: center;

/* ベースラインに揃えて配置する */
align-items: baseline;

次のFlexコンテナには、align-itemsプロパティが指定されてません。

Flexアイテムの高さを指定しない場合に、デフォルト値のstretchが適用されるので、Flexアイテムは Flexコンテナの高さまで広がります。

See the Pen Fl by miyajima yuya (@pikawaka) on CodePen.

上記のCSSを編集して、Flexコンテナにalign-itemsプロパティを指定してみましょう。

以下の表を参考に、align-itemsプロパティ値を変えながら、Flexアイテムの挙動を確かめてみましょう。プロパティは、.flex-container内に指定します。

justify-content（水平方向の位置と間隔）

リンクをコピーしました

justify-contentプロパティは、水平方向のFlexアイテムの位置と間隔を指定します。

1
2
3
4
.flex-container {
  display: flex;
  justify-content: 値; /* Flexコンテナに指定する */
}

justify-contentプロパティで利用できる値は、以下の通りです。
各値によって、Flexアイテムがどのように表示されるかを画像でも確かめてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Flexアイテムを先頭に寄せる、左揃え（デフォルト値） */
justify-content: flex-start;

/* Flexアイテムを末尾に寄せる、右揃え */
justify-content: flex-end;

/* 中央揃え */
justify-content: center;

/*  最初と最後のFlexアイテムは端に、残りは等間隔*/
justify-content: space-between;

/* 両端の */
justify-content: space-around;

次のFlexコンテナには、justify-contentプロパティが指定されてません。

justify-contentプロパティを指定しない場合、デフォルト値のflex-startが適用されるので、Flexアイテムは左揃えで表示されます。

See the Pen flexbox10 by miyajima yuya (@pikawaka) on CodePen.

上記のCSSを編集して、Flexコンテナにjustify-contentプロパティを指定してみましょう。

以下の表を参考に、justify-contentプロパティ値を変えながら、Flexアイテムの挙動を確かめてみましょう。プロパティは、.flex-container内に指定します。

inline-blockとの違い

リンクをコピーしました

div要素などを横に並べる方法はいくつかありますが、displayプロパティではinline-blockとflexで実現できます。

この2つの大きな違いは、displayプロパティを指定する要素です。
inline-blockの場合は、横に並べたい子要素に対して指定します。

1
2
3
4
5
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1
2
3
.container > div {
  display: inline-block;
}

flexの場合は、横に並べたい要素の親要素に対して指定します。

1
2
3
4
5
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1
2
3
.container {
  display: flex;
}

どちらを使えば良いのか

リンクをコピーしました

以前までは、Flexboxのブラウザ対応状況が良くなかったので、古いブラウザに対応するために横並びはflexではなく、inline-blockを使うことが多かったです。

しかし、近年のFlexboxへのブラウザの対応は良好で、ほとんどのブラウザではFlexboxを使うことができます。またスマートフォン（SP）の普及により、レスポンシブに簡単に対応できるFlexboxが主流になっています。

この章のまとめ

リンクをコピーしました