CSSのdisplay:flexの使い方とは？各種プロパティと使用方法を解説

本記事では、CSSのdisplay:flexの使い方や各種プロパティを解説します。これからフレックスボックスを使う方は、利便性の高いdisplay:flexについて理解を深めてください。

CSSでフレックスボックスを作成する際は、display:flexの指定が必要です。display:flexの使い方を覚えておくと、さまざまな形式の並びに対応できます。本記事ではdisplay:flexの使い方や各種プロパティ、注意点について解説します。

display:flexとは？

display:flexは、要素の表示形式を制御するdisplayプロパティの1つで、フレックスボックスというレイアウトモデルを適用します。

display:flexを指定することでフレックスボックスの作成が可能です。そして、フレックスボックスを使うとfloatやtableで構成していた横並びのレイアウトを指定しやすくなります。これから「CSS」を使用する場合は、覚えておくことをおすすめします。

FlexboxとFlexの違いとは？

Flexboxとは、フレックスボックスの仕様に関する総称であり、「CSS」のレイアウトモードの1つです。

Flexboxは「CSS3」の一部として導入されましたが、完全なサポートはブラウザのバージョンによります。そのため、とくに古いブラウザでは動作確認が必要です。

flexは、フレックスアイテムの成長・縮小・ベースサイズを指定するために使う「CSS」のショートハンドプロパティ（複数の関連するプロパティの値を一度に設定するための簡略化された手法）です。実際にflexコンテナを使用する場合は、「CSS」でflexコンテナを作成してから使用します。

display:flexとdisplay:inlineの違いとは？

display:flexは、要素内のアイテムをフレックスボックスのレイアウトで配置するためのプロパティです。

レイアウトモードを使用すると、アイテムの間隔や方向、高さなどを効率的に調整できます。フレックスコンテナ内のアイテムの高さは、一番高いアイテムを基準に自動調整されることが特徴です。

一方でdisplay:inlineは、要素をインライン要素として扱うためのプロパティで、フレックスボックスのような高度な配置やサイズ調整の機能は持っていません。display:inlineを適用された要素はテキストの流れの中で横に並ぶ挙動を示しますが、高さや幅を直接指定することはできません。

したがって、display:flexとdisplay:inlineは、レイアウトとサイズの調整方法が大きく異なります。

display:flexはどうやって使うの？種類別に解説

display:flexを指定することで、フレックスボックスの作成や横並びレイアウトの指定が可能です。

display:flexには、主に以下の7種類があり、それぞれ特徴や使い方などが異なります。

• display:flex
• justify-content
• flex-wrap
• flex-direction
• flex-flow
• align-items
• align-content

ここでは、display:flexの使い方を種類別にそれぞれ解説します。

display:flex

display:flexは、フレックスボックスを作成するときに指定するプロパティです。そして作成したフレックスボックスを利用するためには、以下のコードの記述のように親要素にdisplay:flexを追加することで、親要素をflexコンテナ、子要素を自動的にflexアイテムにできます。

.flex-container {
  display: flex;
}
.flex-item {
  border: 3px solid #ccc;
}

以上のように、親要素にdisplay:flexを記述するだけで、その子要素はflexアイテムとしての動作を持つようになります。display:flexは強力なレイアウトツールなので、早めに覚えておくとよいでしょう。

justify-content

flexコンテナは主軸と交差軸を持っており、justify-contentは主軸の方向を基準にどのようにflexアイテムを配置するか指定するプロパティです。

justify-contentは、主に以下の値を使って指定します。

• flex-start（初期値）
• flex-end
• center
• space-between
• space-around

そして主に以下のようにコードを記述します。

.flex-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height:200px;
border: 2px solid #ccc;
}

コードの設定により、アイテムは縦方向に配置され、アイテム間のスペースは均等になります。この場合、上のアイテムとコンテナの上端、下のアイテムとコンテナの下端との間にはスペースが生じない点に注意してください。

flex-wrap

flex-wrapは、flexアイテムの改行を許可するかどうか指定するときに使用するプロパティです。

flex-wrapは、主に以下の値を使って指定します。

• nowrap（初期値）
• wrap
• wrap-reverse

そして主に以下のようなコードです。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

nowrapの状態で複数のflexアイテムを持つflexコンテナに収まらない場合、flexアイテムはコンテナからはみ出してしまいます。ただしwrapが指定されている場合、flexアイテムは適切に改行され、コンテナの幅に収まるように配置されます。

flex-direction

flex-directionは、flexアイテムの並べる方向や順序を指定するときに使用するプロパティです。

flex-directionは、主に以下の値を使った指定です。

• row（初期値）
• row-reverse
• >olumn
• column-reverse

rowとrow-reverseでは、flexアイテムは親コンテナを基準に横に並ぶ形で配置され、columnとcolumn-reverseは、上下に並んで配置されます。

.flex-container {
display: flex;
flex-direction: row-reverse;
}

以上のコードのようにrow-reverseを指定した場合、flexアイテムは親コンテナの右端から開始して左方向へ並びます。

flex-flow

flex-flowは、flex-directionとflex-wrapをまとめて指定できるプロパティです。そのため、上記2つのプロパティをそれぞれ指定するよりも、flex-flowを指定した方が効率的でしょう。

flex-flowを指定するコードの例は、以下のようになります。

.flex-container {
display: flex;
flex-flow: row wrap-reverse;
}

プロパティの指定は、最初にflex-directionを、次にflex-wrapを指定します。このプロパティを使用することで、より簡潔なコードを記述することが可能です。

align-items

align-itemsは、flexコンテナの交差軸に沿ってflexアイテムの配置を設定できるプロパティです。

align-itemsは、主に以下の値を使って指定します。

• stretch（初期値）
• flex-start
• flex-end
• center
• baseline

stretchの値を入力することで、交差軸方向にflexアイテムのサイズ伸縮が可能です。 flex-startは交差軸の始まり、flex-endは終わり、centerは中央に配置されます。そしてbaselineは、flexアイテムのテキストベースラインに合わせて配置されます。

align-itemsのコードの記述は、以下の通りです。

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 350px;
  height: 200px;
  border: 3px solid #ccc;
}

align-content

align-contentは、複数の行や列が存在する場合のみ、間の配置を交差軸に沿って指定するプロパティです。
align-contentは、主に以下の値を使って指定します。

• stretch（初期値）
• flex-start
• flex-end
• center
• space-between
• space-around

space-betweenとspace-aroundの2つの値は、「最初の行」または「列と最後の行」または「列の交差軸」に沿って、間隔が変わるようになっています。

また、align-contentは、以下のようなコード記述です。

.flex-container {
  display: flex;
  flex-wrap: warp;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

display:flexなどのflexアイテムに使えるプロパティを解説

display:flexなどは、flexコンテナ（親要素）に設定できるプロパティです。そして以下の6つは、flexアイテム（子要素）に設定できるプロパティになります。

• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
• gap

ここでは、それぞれのプロパティを解説します。これから「CSS」を使用する方は、flexコンテナに設定できるプロパティと合わせて覚えおきましょう。

order

orderは、flexアイテムの並べる順番を設定できるプロパティです。orderの初期値は0であり、マイナスの値も指定可能です。

flex-container {
  display: flex;
}
.flex-item2 {
  order: -1;
}

以上のコードのように、orderに値を記述してflexアイテムの順番を指定します。

＜div class=”flex-container”＞
＜div class=”flex-item1″＞アイテム1＜/div＞
＜div class=”flex-item2″＞アイテム2＜/div＞
＜div class=”flex-item3″＞アイテム3＜/div＞
＜/div＞

orderを使う場合は、flexアイテムの順番を決めるときに1番目にしたいflexアイテムを「1」、2番目にしたいものを「2」と指定していけば、順番を指定できます。

flex-grow

flex-growは、利用可能な余分なスペースをflexアイテム間でどのように分配するかを指定するプロパティです。flex-growの初期値は0で、マイナスにはできません。

flex-growは、flexアイテム間のスペースの分配比率を決定します。

.flex-container {
  display: flex;
}
.flex-item{
  border: 2px solid #ccc;
}
.flex-item1 {
  flex-grow: 1;
}
.flex-item2 {
  flex-grow: 2;
}

以上のコードのように、flex-growに値を記述してflexアイテムの順番を指定します。

flex-shrink

flex-shrinkは、flexアイテムを「どのくらい縮小するか」というパーセンテージを指定できるプロパティで、初期値は1でマイナスの値の指定は不可です。flex-shrinkは、flexアイテムがflexコンテナをはみ出すときにそのアイテムを縮める必要がある場合に使用します。

flex-shrinkを使用する主なケースは、以下のようになります。

• 要素を縮めたいとき
• 要素を縮めたくないとき
• flexアイテムがflexコンテナをはみ出すとき

flex-shrinkは、flexコンテナにdisplay:flexを指定してflexアイテムにflex-shrinkを指定することで使用できます。

.flexbox {
display: flex;
}

.flex-item{
color: #fff;
flex-shrink: 数値;
}

flex-basis

flex-basisは、flexアイテムの基本の幅・大きさを指定するプロパティです。初期値はautoであり、flexアイテムのみに有効です。似た要素にwidthやheightがありますが、flex-basisはそれらの要素よりも優先されます。

flex-basisを使うときは、flexコンテナにdisplay:flexを指定してflexアイテムにflex-basisを指定します。

.flexbox {
display: flex;
}

.flex-item{
flex-basis: 値;
}

「値」と記述された場所にはautoを指定しましょう。

align-self

align-selfは、flexアイテムの位置を個別に指定するプロパティです。

align-selfプロパティの初期値は、親のalign-itemsの値を継承します。align-selfは交差軸に沿ってflexアイテムの位置を指定するため、flex-directionの値によって、どの軸が交差軸として扱われるかが変わります。

align-selfは、以下のようなコード記述です。

.flex-container {
  display: flex;
  height:300px;
  align-items: flex-end;
}
.flex-item2 {
  align-self: center;
}

align-self を使うときは、flexコンテナにdisplay:flexを指定して、対象のflexアイテムにalign-self を指定します。

gap

gapは、flexアイテムやgridアイテム同士の間隔を指定するプロパティです。flexアイテム間の余白のみ指定するプロパティであるため、コンテナの外側の余白は指定できません。使用するときは、flexコンテナにdisplay:flexとgapを指定して、gapには数値と単位も指定します。

gapのコードは、以下の通りです。

.flexbox {
display: flex;
gap: 20px; /* 縦・横で同じ余白 */
}

また、行と列の間隔を別々に指定することもできます。

.flexbox-different-gaps {
display: flex;
gap: 20px 30px; /* 縦20px、横30pxの指定 */
}

このようにgapを使用すると、flexアイテム間の間隔が指定された値になります。

display:flexなどのflexboxを使用する際の注意点

display:flexなどのflexboxは、さまざまな用途で便利に使用できますが、以下のような注意点があります。

• 意図しないスペースが空く
• 要素を任意に並べられない
• 折り返しができない

これからdisplay:flexなどのflexboxを使用する際には、ここで解説する3つの注意点を意識しましょう。

意図しないスペースが空く

1つ目の注意点は、意図しないスペースが空くことです。

justify-contentプロパティにspace-betweenを指定した場合、アイテム間にスペースが等間隔で配置されます。これは意図的な動作ですが、期待したデザインと異なる場合があるかもしれません。意図しないスペースが空いてしまう場合は、擬似要素が原因なことが多いです。

また、flexアイテム内の擬似要素（afterやbefore）が存在すると、これがレイアウトに影響を与え、意図しないスペースが発生することがあります。したがって、擬似要素を使用する際は、その動作や影響を理解してデザインすることが重要です。

要素を任意に並べられない

2つ目の注意点は、flexboxの使用方法による要素の配置の問題です。
display:flexを指定していない場合やflexアイテムへの指定が不適切な場合、期待した並び順にならないことがあります。とくに、flexアイテム自体にdisplay:flexを指定してしまうと、そのアイテムが新しいflexコンテナになります。これが意図しない配置を引き起こすことがあるため、注意が必要です。

修正する場合は、flexコンテナにdisplay:flexを指定し、適切に「justify-content」「align-items」「flex-wrap」などを親要素に指定することで、期待通りの配置ができます。

折り返しができない

3つ目の注意点は、折り返しができないことです。

要素が折り返されない場合の一般的な原因として、flex-wrapの指定がないことやflexコンテナのサイズに対してflexアイテムが少ないことが考えられます。flex-wrapプロパティを使うと、flexアイテムの折り返しを制御できます。そのため、要素の折り返しを行う場合は、flex-wrapプロパティの設定と、display:flexの指定を確認しましょう。

ただし、flexコンテナの幅や高さに合わせて、flexアイテムが十分にスペースを持っていれば、折り返しは発生しません。

display:flexが効かないときに考えられる原因3選

display:flexは、フレックスボックスの作成ができたり横並びのレイアウトの指定ができたりする便利なものですが、display:flexが効かずに横並びにならないこともあります。

display:flexが効かないときには、原因を突き止めて修正しなくてはいけません。しかし、その原因がわからないことも多いです。

ここでは、display:flexが効かないときに考えられる原因を3つ解説します。

子要素にdisplay:flexを指定している

display:flexが期待通りに動作しない場合の1つの原因として、子要素にdisplay:flexを誤って指定しているケースがあります。

本来display:flexはflexコンテナ（親要素）に指定するものであり、flexアイテム（子要素）に直接指定することで横並びのレイアウトが期待通りにならないことがあるのです。

問題が発生した場合は、まずこの点を確認し、必要であれば修正してください。正しく指定された場合、目的のレイアウトを適切に適用できます。

display:flexが効かないことで悩んでいる方は、ぜひ確認してみることをおすすめします。

display:blockなどの要素が残っている

display:blockなどの要素が残っている場合、display:flexの動作を妨げる可能性があります。
display:blockが後から指定されると、先に指定されたdisplay:flexを上書きしてしまうため、flexの振る舞いが期待通りにならなくなります。

この問題は、display:blockの指定をdisplay:flexに変更する際に、前の指定を削除し忘れることで発生するケースが多いです。そのためdisplay:blockの指定を確認し、不要であれば削除してdisplay:flexが正確に適用されるように注意しましょう。

コードの記述内容が間違っている

コードの記述内容が間違っている場合、display:flexに限らずCSS自体が正常に動作しません。

たとえば、display:flexやflex-directionなどのスペルを間違えて記述していたり、必要な記号やスペースを忘れていたりするなどのミスは、頻繁に発生することが多いです。コードが間違えていると指定方法が合っていてもCSSが適用されないため、しっかりと記述したコードに間違いがないか確認してください。

間違いを修正して正しいコードを記述できていれば、問題なく動作するようになります。

display:flex;などのflexboxを使い、コーディングを上達させよう

flexboxは、CSSによるコーディングのクオリティや作業効率の向上が期待できます。さらに、flexコンテナで指定するプロパティは使う機会が多いため、1度覚えておくと今後コーディング作業を効率化できます。

これからコーディングを行う方やコーディングスキルを上達させたい方は、本記事を参考にflexboxflexboxの使い方を学習してみてください。