CSS

CSSのflexboxの基本的な使い方【図解】

どうも、つよぽんです!

今回はCSSのflexboxの使い方について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSでブロックレベル要素を横並びにしたい
  • CSSのflexboxが何か知りたい
  • CSSのflexboxで出来ることを知りたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSのflexboxの使い方を覚えるCSSのflexboxを使うことで、横並びに配置することが出来なかったHTMLのっブロックレベル要素を横並びに配置することが出来るようになります。...

それでは次の内容で話を進めていきます。

今回の内容
  1. CSSのflexboxとは
  2. CSSのflexboxを構成する2つの概念
  3. CSSのflexboxを使った3つサンプル

 

CSSのflexboxとは

CSSのflexboxを使うことによって次のようなことが実現できます。

flexboxで実現できること
  1. 表示要素を横並びにする(ブロックレベル要素含む)
  2. 表示要素を逆順にする
  3. 横並びにした際に、指定した横幅以上になったら次に行に折り返す

上記に挙げた3つ以外にも出来ることはいろいろありますが、よく使う機能は限られるのでまずはこの3つがあるというのを覚えておけばよいでしょう。

例えば上記3つのうち、「横並び」と「折返し」の機能を使うと以下のようなイメージギャラリーを作ることもできます。

flexboxを使ってイメージギャラリーを作ったサンプルflexboxを使ってイメージギャラリーを作ったサンプル

の表示要素を逆順にしたものは以下の画像の縦並びの要素を見ていただくとわかるかと思います。(青枠内ののコードに該当する箇所)

縦並びの表示要素をflexboxを使って逆順にしているサンプル縦並びの表示要素をflexboxを使って逆順にしているサンプル

上記画像サンプルでは、縦並びのものを逆順にしていますが、もちろん横並びを逆順にすることも可能です。

CSSのflexboxを構成する2つの概念

CSSのflexboxは次の2つ概念(要素)によって構成されています。

flexboxを構成する2つの概念
  1. フレックスコンテナー
  2. フレックスアイテム

フレックスコンテナー

フレックスコンテナーは次の項目で説明するフレックスアイテムを内包する要素となります。

次の画像はフレックスコンテナーフレックスアイテムが範囲をわかりやすくするために背景色をつけて視覚化したものです。

フレックスコンテナーの説明フレックスコンテナーの説明

上の画像の水色背景部分フレックスコンテナーとなります。フレックスコンテナーの中にピンク背景の正方形(フレックスアイテム)が内包されているのがわかるかと思います。

フレックスアイテム

フレックスアイテムは前の項目で説明したフレックスコンテナーの中に含まれる要素になります。

次の画像はフレックスコンテナーの解説したときのものと同じ画像になりますが、フレックスアイテムに焦点をあわせて説明した画像になります。

フレックスアイテムの説明フレックスアイテムの説明

このフレックスコンテナーフレックスアイテムを使って、「表示要素の並ぶ向き並び順を好きなように変更できる」というのを理解できればflexboxについての理解は十分でしょう。

あとは、次に章で解説するサンプルコードその出力結果をみてイメージを掴んでいきましょう。

CSSのflexboxを使った3つサンプル

この章では、CSSのflexboxを使った実例を3つサンプルコードと出力結果の画像を使いながら解説していきます。

3つのサンプルコードの内容は次のとおりです。

3つのサンプルコードの内容
  1. フレックスアイテムを横並びにする
  2. 横並びのフレックスアイテムを逆順にする
  3. フレックスコンテナーの横幅を超えたときに次の行にフレックスアイテムを表示する

フレックスアイテムを横並びにする

フレックスアイテムを横並びにする方法は、下の画像の赤枠内のように、フレックスコンテナーの中にフレックスアイテムを含めるだけです。

フレックスコンテナーの作り方はCSSのスタイル定義に「display: flex」をフレックスコンテナーにしたい要素に追加するだけです。

フレックスアイテムを横並びにするサンプルフレックスアイテムを横並びにするサンプル

上の画像のサンプルコードは以下のリンクからも確認することが出来ます。

flexboxのサンプル3

横並びのフレックスアイテムを逆順にする

フレックスアイテムの並びを逆順にする方法は、フレックスコンテナーとする要素に「display: flex;」の他に「flex-direction: row-reverse;」を追加するだけです。(以下のCSSの青枠内のスタイル定義を参照)

横並びのフレックスアイテムを逆順にするサンプル横並びのフレックスアイテムを逆順にするサンプル

上の画像のサンプルコードは以下のリンクからも確認することが出来ます。

flexboxのサンプル4

フレックスコンテナーの横幅を超えたときに次の行にフレックスアイテムを表示する

フレックスコンテナーの横幅を超えてフレックスアイテムが配置される際に、次の行に折り返したいときがあります。(イメージギャラリーの作成など)

その時は、フレックスコンテナーとする要素に「display: flex;」の他に「flex-wrap:  wrap;」を追加するだけです。(以下のCSSの青枠内のスタイル定義を参照)

フレックスアイテムを折り返すサンプルフレックスアイテムを折り返すサンプル

上の画像のサンプルコードは以下のリンクからも確認することが出来ます。

flexboxのサンプル5

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. CSSのflexboxを使うことで、表示要素の並ぶ向き(縦並び・横並び)や、並び順を変更できる
  2. CSSのflexboxには「フレックスコンテナー」「フレックスアイテム」という2つの概念がある
  3. フレックスコンテナーの中にフレックスアイテムが配置される
  4. CSSのflexboxを使ったサンプルコード3つを紹介した

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSのflexboxの使い方を覚えるCSSのflexboxを使うことで、横並びに配置することが出来なかったHTMLのっブロックレベル要素を横並びに配置することが出来るようになります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です