コードカキタイ
コーディング
CSS
CSSのFlexboxはどう使う？基礎知識や基本的な使い方を解説

CSS

最終更新日: 2024.01.16 (公開: 2024.01.16)

CSSのFlexboxはどう使う？基礎知識や基本的な使い方を解説

CSSのFlexboxは、CSS3で導入された機能のひとつです。本記事ではCSSのFlexboxの基礎知識や基本的な使い方、各プロパティについて詳しく解説します。CSSでFlexboxを使いたい方やFlexboxの勉強をしたい方は、ぜひ参考にしてください。

CSSのFlexboxとは？
- Flexboxとはどのような構成になっている？
- Flexboxの対応ブラウザ
CSSのFlexboxの4つの特徴
CSSのFlexboxの使い方を知ろう
- HTMLの親要素にdisplay: flex;を指定する
- HTMLの子要素に各種プロパティを指定する
CSSのFlexboxの親要素に指定できるプロパティを解説
CSSのFlexboxの子要素に指定できるプロパティを解説
CSSのFlexboxへの理解を深め、思い通りのレイアウトを作ろう

CSSのFlexboxとは？

「CSS」のFlexboxは「CSS3」にて導入された機能で、多くのケースにおいてfloatを使用するよりも柔軟かつ簡単に横並びのレイアウトが作成可能です。Flexboxは、親要素としてのFlexコンテナとその中に含まれる子要素のFlexアイテムという構造で構成されています。

複雑なレイアウトを少ないコードで作成できる場合が多いため、FlexboxはWebページのレイアウトを効率的に制御するための強力な機能であり、現代のWebデザインにおける重要な役割を果たしています。とくに、レスポンシブデザインや動的なコンテンツの配置において、Flexboxは有用です。

Flexboxとはどのような構成になっている？

Flexboxは親要素がFlexコンテナとなり、その中にFlexアイテムと呼ばれる子要素を内包する形で構成されています。つまり、親要素にdisplay:flex;を指定しFlexコンテナにすると、その子要素は自動的にFlexアイテムになるのです。Flexboxは基本的に一次元（行または列）のレイアウトに特化しており、要素を横に並べた後に下へ折り返します。この形式は、要素を揃えて配置することに長けています。

Flexboxの対応ブラウザ

Flexboxは、ChromeやEdge・Firefoxなど多くのデスクトップブラウザや主要なモバイルブラウザに対応しています。Internet ExplorerはIE11から一定程度のサポートがありますが、2023年8月時点でサポートは終了しており、完全な互換性も保証されていません。基本的には主要なモダンブラウザのほとんどが、Flexboxを広くサポートしています。

CSSのFlexboxの4つの特徴

「CSS」のFlexboxには、主に4つの特徴があります。

自由に横並びのレイアウトが作れる
高さの自動調整がされる
並び順の指定が可能
余白の指定がしやすい

「CSS」のFlexboxを使いこなすことによって、見やすいレイアウトを簡単に作成可能です。ここからは、4つの特徴について詳しく解説します。

自由に横並びのレイアウトが作れる

Flexboxは、Webページの要素を自由に横や縦に配置するための強力なツールです。従来のfloatやinline−blockを使った方法と比べて、より簡単かつ柔軟にレイアウトを作成できます。

Flexboxを使用すると、要素のサイズや順序・配置を比較的自由に変更できます。また、要素間の余白も容易に調整可能です。これにより、レスポンシブデザインや複雑なレイアウトも簡単に実現できます。Flexboxを使用すれば、Webデザインの幅が広がり、より魅力的なWebページを作成できるでしょう。

高さの自動調整がされる

Flexboxでは、特定のプロパティを用いて、親要素（Flexコンテナ）の高さに合わせた子要素（Flexアイテム）の高さの自動調整が可能です。そのため、要素間の高さを手動で一致させる必要がなく、Webページのデザインが一貫性を持ち、整った見た目のWebページが作れます。この機能は、とくにレスポンシブデザインにおいて有用です。

並び順の指定が可能

Flexboxでは、orderプロパティを使用してFlexアイテムの表示順序を自由に指定できます。これにより、HTMLのソースコードの順序とは異なる順序で要素を表示できます。

従来の方法で要素の順序を変更するには、HTMLのソースコードを変更する必要がありました。しかし、Flexboxを使用するとCSSだけで順序を変更できるためWebページのデザインがより柔軟になります。

余白の指定がしやすい

Flexboxでは、justify−contentやalign−itemsなどのプロパティを使用して、Flexアイテム間の余白を簡単に指定できます。これにより、要素間のスペースを自由に調整可能です。

従来の方法では、要素の余白を指定するためにmarginやpaddingを手動で調整する必要がありました。しかしFlexboxを使用すると、特定のプロパティによって余白の調整が容易になります。これにより、Webページのデザインが一貫性を持ち、見た目が整ったものになるのです。

CSSのFlexboxの使い方を知ろう

ここからは、Flexboxの基本的な使い方のうち、以下の2つについて詳しく解説します。

HTMLの親要素にdisplay: flex;を指定する
HTMLの子要素に各種プロパティを指定する

Flexboxでどのようなことができるのかを、サンプルコードとともに解説するので、参考にしてください。

HTMLの親要素にdisplay: flex;を指定する

Flexboxを使うときは、HTMLの親要素にdisplay: flex;を指定します。この指定をおこなうことで、その要素はFlexコンテナとして機能する仕組みです。

ただし、この設定だけではFlexboxの強力な機能はあまり活用できません。子要素（Flexアイテム）の並び替えや配置・伸縮の設定など、さまざまなプロパティを用いてレイアウトをより詳細に制御できます。

たとえば、以下のHTMLコードがあるとします。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div class="flex−container">
<div class="flex−item">1</div>
<div class="flex−item">2</div>
<div class="flex−item">3</div>
</div>

</body>
</html>

<div class="flex-container">の要素を装飾するCSSコードが、以下の通りです。

.flex−container {
  display: flex;
}

.flex−item {
  width: 100px;
  height: 100px;
  background−color: LightSkyBlue;
  text−align: center;
  line−height: 100px;
}

上記の「CSS」では、display: flex;プロパティを親要素（ここでは .flex−container）に適用することで、その子要素（.flex−item）が自動的にflexアイテムとなるのです。

子要素（.flex−item）において、widthとheightで幅と高さを設定しています。これは見た目をわかりやすくするために設定するオプションです。

background−color, text−align, line−heightもオプションで、見た目を整えるためのものです。

HTMLの子要素に各種プロパティを指定する

Flexboxには、子要素（フレックスアイテム）に適用できるいくつかの主要なプロパティがあります。ここでは、6つのプロパティについて解説します。

order
flex−grow
flex−shrink
flex−basis
flex
align−self

プロパティ名	概要	サンプルコード
order	orderプロパティでアイテムの順序を変更できる。デフォルトは0。	/* 第1アイテムを最後に移動 */ .item1 { order: 1; }
flex−grow	flex−growプロパティでアイテムが主軸に沿ってどれだけ「成長」するかを決定できる。デフォルトは0。	/* アイテムを倍に「成長」させる */ .item1 { flex−grow: 2; }
flex−shrink	flex−shrinkプロパティでアイテムが縮む量を指定できる。デフォルトは1。	/* アイテムを縮ませない */ .item1 { flex−shrink: 0; }
flex−basis	flex−basisプロパティでアイテムの初期サイズを設定できる。デフォルトはauto。ただし、親要素の flex−direction に依存する場合もある。	/* アイテムの基本幅を200pxに設定 */ .item1 { flex-basis: 200px; }
flex	flex−grow, flex−shrink, flex−basisを一括で指定できる短縮形プロパティ。	/* flex−grow, flex−shrink, flex−basisを一括で設定 */ .item1 { flex: 2 0 200px; }
align−self	align−selfプロパティは個々のアイテムに対して縦軸（交差軸）での位置を調整できる。交差軸は親要素の flex−direction によって縦軸または横軸となる。	/* 特定のアイテムだけ中央に配置 */ .item1 { align−self: center; }

CSSのFlexboxの親要素に指定できるプロパティを解説

ここからは、「CSS」のFlexboxで親要素に指定できる7つのプロパティや値のコードを添えて解説します。

display:flex
justify−content
flex−wrap
flex−direction
flex−flow
align−items
align−content

display:flex

displayプロパティをflexやinline−flexに設定することで、その要素はフレックスコンテナになります。

具体的なコードの例は、以下の通りです。それぞれデザインに応じて使い分けてください。

/* ブロックレベルのフレックスコンテナ */
.flex−container {
  display: flex;
}

/* インラインレベルのフレックスコンテナ */
.inline−flex−container {
  display: inline−flex;
}

justify−content

justify−contentプロパティは、フレックスアイテムの主軸に対する配置を指定できます。主軸は親要素（フレックスコンテナ）のflex−directionプロパティによって決まります。

具体的な指定法は、以下の通りです。

flex−start: 開始位置に寄せる
flex−end: 終了位置に寄せる
center: 中央に寄せる
space−between: 両端に寄せて間隔を開ける
space−around: 均等な間隔で配置

justify−contentプロパティを使うコードの例は、以下の通りです。

.flex−container {
  justify−content: center;　//フレックスアイテムを中央寄せする
}

flex−wrap

flex−wrapプロパティは、フレックスアイテムが折り返すかどうかを指定します。

具体的な指定法は、以下の通りです。

nowrap: 折り返しなし（デフォルト）
wrap: 折り返し
wrap−reverse: 逆順で折り返し

flex−wrapプロパティを使うコードの例は、以下の通りです。

.flex−container {
  flex−wrap: wrap;　//フレックスアイテムがコンテナのサイズを超えた場合には折り返す
}

flex−direction

flex−directionプロパティは、子要素（フレックスアイテム）の配置方向を指定します。

具体的な指定法は、以下の通りです。

row: 横方向（デフォルト）
row−reverse: 横方向で逆順
column: 縦方向
column−reverse: 縦方向で逆順

flex−directionプロパティを使うコードの例は、以下の通りです。

.flex−container {
  flex−direction: row;　//フレックスアイテムを横(row)方向に配置
}

flex−flow

flex−flowプロパティは、flex−directionとflex−wrapの短縮形です。

具体的な指定法は、以下の通りです。

.flex−container {
  flex−flow: row wrap;　//フレックスアイテムが行（row）方向に配置され、コンテナのサイズを超えた場合には折り返す
}

align−items

align−itemsプロパティは、フレックスアイテムの縦軸（交差軸）に対する配置を指定します。

具体的な指定法は、以下の通りです。

flex−start: 開始位置に寄せる
flex−end: 終了位置に寄せる
center: 中央に寄せる
baseline: テキストのベースラインに揃える
stretch: コンテナに合わせて伸ばす（デフォルト）

.flex-container {
  align−items: center;　//フレックスアイテムを中央に寄せる
}

align−content

align−contentプロパティでは、複数行のフレックスアイテムをどのように配置するか指定します。

flex−start: 開始位置に寄せる
flex−end: 終了位置に寄せる
center: 中央に寄せる
space−between: 両端に寄せて間隔を開ける
space−around: 均等な間隔で配置
stretch: コンテナに合わせて伸ばす（デフォルト）

.flex−container {
  align−content: space-around;　//フレックスアイテムを均等な間隔で配置する
}

CSSのFlexboxの子要素に指定できるプロパティを解説

親要素に指定できるプロパティを理解したら、次はFlexboxの子要素に指定できるプロパティを理解しましょう。

具体的には、以下の5つです。

orderプロパティ
flex−growプロパティ
flex−shrinkプロパティ
flex−basisプロパティ
align−selfプロパティ

それぞれ詳しく解説します。

orderプロパティ

orderプロパティは、フレックスアイテムの配置順序を制御でき数値が小さいほど先に配置されます。

サンプルコードは、以下の通りです。

.item1 {
  order: 2;
}
.item2 {
  order: 1;
}

上記のコードの場合、item2がitem1よりも先に配置されます。

flex−growプロパティ

flex−growプロパティによって、余ったスペースに対してフレックスアイテムがどれだけ成長するか（取るか）を設定できます。

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}

余ったスペースがある場合、item2はitem1の2倍のスペースを取ります。

flex−shrinkプロパティ

flex−shrinkプロパティによって、必要に応じてアイテムがどれだけ縮むかを設定できます。

.item1 {
  flex−shrink: 1;
}
.item2 {
  flex−shrink: 0;
}

上記のコードの場合、スペースが足りないときにitem2は縮みませんがitem1は縮みます。

flex−basisプロパティ

flex−basisプロパティでフレックスアイテムの初期サイズを設定できます。

.item1 {
  flex−basis: 200px;
}

この設定により、item1の初期サイズは200pxに設定されます。

align−selfプロパティ

align−itemsプロパティによる親要素からの設定を上書きし、個々のアイテムに対して縦軸（交差軸）に沿った配置を制御できます。

.item1 {
  align−self: flex−start;
}

上記の設定により、item1は縦軸の開始点に配置されます。

CSSのFlexboxへの理解を深め、思い通りのレイアウトを作ろう

Flexboxは「CSS」の強力なレイアウトモデルであり、Webページの要素を効果的に配置・整列・配布するためのツールです。Flexboxを使うことで、複雑なレイアウトも簡単に実現できます。レスポンシブデザインにも対応しており、Flexboxを活用することでデバイスのサイズに関係なく、適切なコンテンツの表示が可能です。

Flexboxのプロパティを学習し実践することで、Webデザインの幅が広がります。本記事を参考に思い通りのレイアウトを実現し、ユーザーに魅力的なWebページを提供しましょう。