初心者による初心者のためのフレックスボックス図解①【Flex Container編】

初心者による初心者のためのフレックスボックス図解1

まゆえる
まゆえる

こんにちは、鳥以下の記憶力のまゆえるです。

8月の頭に課金したドットインストールでHTML/CSSを勉強中なのですが、詳解CSS フレックスボックス編 (全16回) までなんとか手を動かしながらやってみたものの1週間くらいサボったらすっかり忘れてしまいました...

あと何回視聴したら次へいけるのかな...なんて考えたら真夏なのに寒気を感じましたので、ぽんこつまゆえるでもわかるように学習内容をまとめてみました。

記憶を定着させるために学習内容を書いていますが、まゆえると同じフレックスボックス初心者さんがいらっしゃればお役に立ちたいと思いますので少しでも参考になれたら嬉しいです!

参考 日本語対応!CSS Flexboxのチートシートを作ったので配布しますWebクリエイターボックス

WebクリエイターボックスさんのFlexboxのチートシートは印刷もできて大変便利なのでぜひご覧ください。まゆえるも印刷して机に常備しています!

この記事の内容
  • フレックスボックスとは
  • Flex ItemとFlex Container
  • 主軸と交差軸
  • Flex Containerに使える6つのプロパティ

この記事では以上の内容について、フレックスボックス初心者かつ、ぽんこつのまゆえる自身が見返したときに理解できるよう詳しくまとめています。

まゆえる
まゆえる

この記事は以下の方におすすめです!

  • Progateや参考書でHTML/CSSを学習してもっと勉強したいと思った方
  • HTML/CSSの基礎は理解したけれどフレックスボックスはとっつきにくい挫折した方
  • レスポンシブ対応のWebサイトを制作したくてフレックスボックスについて知りたい方

初心者による初心者のためのフレックスボックス図解2初心者による初心者のためのフレックスボックス図解②【Flex Item編】

フレックスボックスとは

flexbox(フレックスボックス)は、近年新たに定義されたCSSのレイアウト機能です。フロートを使った旧来の方法と比べ、簡単に2コラムレイアウトや3コラムレイアウトを実現することができます。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 214ページ

まゆえるはProgateの「HTML&CSS中級編」の道場コースで挫折してしまいました。特にフロート(float)につまずきました。

しかし、Webサイトを作成する上で2コラムレイアウトや3コラムレイアウトを実現する技術は必要です。現に、まゆえる.comのパソコン版は2コラムレイアウトになっています。左側にメイン部分である記事が表示されており、右側にプロフィールなどの補足的な情報が表示されているサイドバーがある構成です。

このようなレイアウトを簡単に作ることができるのがフレックスボックスというCSSの技法なのです。

また、このフレックスボックスを使用すると「レスポンシブWebデザインのサイト」を簡単に作成することができます。

同じ1枚のHTMLで、スマートフォンでもパソコンでも、画面サイズに合わせて最適なレイアウトで表示する「レスポンシブWebデザイン」は、多くのサイトに導入され、広く普及しています。

いちばんよくわかるHTML5 & CSS3デザインきちんと入門 236ページ

このまゆえる.comもレスポンシブWebデザインのサイトであり、パソコンから閲覧すると2コラムレイアウトですが、スマートフォンから閲覧するとシングルコラムレイアウト表示になります。

シングルコラムレイアウトとは、メイン部分である記事のみがスマートフォン画面の幅いっぱいに表示され、プロフィールなどのサイドバーが記事の下に表示されることです。

以下の記事では、フレックスボックスを使う上で知っておきたいフレックスボックスの基礎を簡単にまとめています。

レスポンシブWebデザインが当たり前の時代の、新しいHTML・CSSの書き方ガイド

フレックスボックスの関連用語

まゆえる
まゆえる

ドットインストールで学習したソースコードを見ながら理解を深めていくよ!

Flex Item と Flex Container

フレックスボックスを実際に使用して、デフォルトでは縦に並んでしまうdivを横並びにしていきます。

たとえば、3つ用意したdiv(9〜11行)を縦方向ではなく横方向に要素を並べたいとします。しかし、divはブロック要素のためCSSで何も指定しないデフォルトの状態だと縦方向に積まれていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charaset="utf-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</body>
</html>

HTMLで3つ用意したdivに、わかりやすいようにboxクラスを付けてwidthとheightの縦横を100pxに指定して正方形にします。

背景色もそれぞれ違う色にしてわかりやすくしたいのでそれぞれのdivにbox1、box2、box3とクラスを付けていき、backgroundプロパティに背景色を指定します。(orange、skyblue、tomato)

.box {
  width: 100px;
  height: 100px;
}

.box1 {
  background: orange;
}

.box2 {
  background: skyblue;
}

.box3 {
  background: tomato;
}

ブラウザで確認すると、正方形で色分けされた3つのdivは縦方向に積まれています。

ブラウザで確認した3つ用意したdivが縦に積まれている画像

この3つのdivを横に積みたい場合にフレックスボックスを使うと簡単なのです!

使うためには親要素が必要なのでdivを配置(9行目)して先程の3つ用意したdivを囲います。スタイルをつけたいのでcontainerクラスを付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charaset="utf-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div><!-- /.container -->
</body>
</html>
まゆえる
まゆえる

containerは翻訳するとコンテナ、容器という意味だよ!知らなかったのはまゆえるだけかな...

containerクラスに「display : flex」というスタイルを付けます。親要素にこのスタイルを付けるだけで子要素の3つのdivが横並びになるので、上記の画像のように縦に積まれていたdivが横に積まれていきます。

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
}

.box1 {
  background: orange;
}

.box2 {
  background: skyblue;
}

.box3 {
  background: tomato;
}

並べた要素(ここでは3つ用意したdiv)をFlex Item

その親要素(containerクラスをつけたdiv)をFlex Containerと呼びます。

主軸と交差軸

親要素であるFlex Container(上記のソースコードではcontainerクラスが付いたdiv)に「display : flex」というスタイルを指定すると「これからフレックスボックスを使いますよ」という宣言になります。そうすると、主軸と交差軸という2つの軸が設定されます。

デフォルトでは主軸は左から右に、交差軸は主軸に直交する形で上から下に設定されているので、画像のような並び順で横並びになります。

主軸と交差軸のデフォルトの向きの図解

主軸に沿って要素(Flex Item)が並べられていくので、デフォルトでは左から右に1、2、3と並んでいきます。

フレックスボックスではFlex ContainerとFlex Itemにそれぞれプロパティを設定することでさまざまなレイアウトを組むことが可能になります。

まゆえる
まゆえる

まゆえるにはすでに難しいけど、この主軸と交差軸で要素の配置が大きく変わってくるからどちらがどちらを向いているか意識するのが重要なんだって!

Flex Containerに付けられるプロパティは6種類

  1. flex-direction
  2. justify-content
  3. align-items
  4. flex-wrap
  5. align-content
  6. flex-flow

Flex Containerには上記6種類のプロパティを付けることができます。

それぞれ使い方を図を使用してできるだけわかりやすく記載しておりますのでぜひご参考になれたら嬉しいです。

flex-directionプロパティ

このflex-directionプロパティは主軸の方向を決めるためのプロパティです。初期値はrowで、主軸は左から右に設定されます。

まゆえる
まゆえる
  • flex-direction : row
  • flex-direction : row-reverse
  • flex-direction : column
  • flex-direction : column-reverse

値だけでこんなにあるよ...

flex-direction : row

初期値のrowは、要素(Flex Item)が主軸に沿って左から右へ並べられていきます。これが基本の形になります。

flex-direction : rowの図解
まゆえる
まゆえる

directionは翻訳すると「方向」という意味だよ!

rowは「」という意味だよ!table要素のときにもでてくるよね!

flex-direction : row-reverse

row-reverseは基本の形から主軸だけが反転します。

主軸だけが右から左へと変わり、要素は右から左に1、2、3と配置されていきます。

flex-direction : row-reverseの図解

flex-direction : column

flex-direction : columnとすると、先程の基本の形から主軸と交差軸が入れ替わります。

要素は主軸に沿って並べられていきますので、上から下へ1、2、3という並び順になります。

flex-direction : columnの図解
まゆえる
まゆえる

columnは「」だったよね!まゆえるよくわからなくなるから「行」は横書きの1行、2行!「列」は1列、2列に縦に並ぶ!なんて言ってるけど結局あやふやになるんだ...

参考 ひと目でわかる行列(Row ・ Column)の方向の覚え方Λlisue's blog

flex-direction : column-reverse

row-reverseと同様に、column-reverseとすると主軸の向きだけが反転して下から上へという向きになります。そのため、要素は下から上へ1、2、3という並び順になります。

flex-direction : column-reverseの図解

justify-contentプロパティ

このjustify-contentプロパティは主軸に沿って要素(Flex Item)をどう揃えるかを指定するプロパティです。

まゆえる
まゆえる
  • justify-content : flex-start
  • justify-content : flex-end
  • justify-content : center
  • justify-content : space-between

これも値がたくさんだ...

justify-content : flex-start

flex-startは、「start」とあるように主軸の始点から要素を揃えます。

以下の画像では、主軸が左から右へ向いている場合の例です。要素は左揃えになっています。

justify-content : flex-startの図解
まゆえる
まゆえる

justifyは「正当化する」という意味なんだって!「コンテンツを整頓する」って感じかな?!

justify-content : flex-end

flex-endの場合、「end」とあるように主軸の終点で要素を揃えます。そのため、以下の画像では要素は右揃えになっています。

justify-content : flex-endの図解

justify-content : center

centerの場合、「center」とあるように主軸に沿って中央揃えになります。

justify-content : centerの図解

justify-content : space-between

space-betweenの場合、要素の間の余白が均等に配置されます。

justify-content : space-betweenの図解
まゆえる
まゆえる

betweenは「〜の間に」という意味だったよ!中学英語でやったような覚えてないような...

align-itemsプロパティ

このalign-itemsプロパティは交差軸に沿って要素(Flex Item)をどう揃えるかを指定するプロパティです。こちらは交差軸方向に余裕がある場合にのみ有効なプロパティです。

初期値はflex-startです。

まゆえる
まゆえる
  • align-items : flex-start
  • align-items : flex-end
  • align-items : center

この3つの値を設定できるよ!

align-items : flex-start

justify-contentプロパティと同じように、flex-startとすると交差軸の始点で要素を揃えます。そのため、以下の画像では交差軸が上から下へと向いているので上揃えになっています。

align-items : flex-startの図解

align-items : flex-end

こちらも同様に、flex-endの場合は交差軸の終点で要素を揃えます。

以下の画像では、交差軸が上から下へと向いているので下揃えです。

align-items : flex-endの図解

align-items : center

こちらも同様に、centerなので交差軸からみて中央揃えになります。

align-items : centerの図解
まゆえる
まゆえる

alignは「揃える」って意味なんだって!

ちなみにフレックスボックスで「align」ってなってたら「交差軸に対しての操作」になるので覚えていて損はなさそうだよ!

flex-wrapプロパティ

このflex-wrapプロパティは、並べたい要素(Flex Item)の幅がコンテナ(Flex Container)の幅を超える場合に使えるプロパティです。

初期値はnowrapです。

まゆえる
まゆえる

急に出てきた「コンテナの幅」っていうのは親要素であるFlex Containerの幅ことだね!一番上で書いたソースコードではcontainerクラスが付いているdivの幅だね!

並べたい要素の幅がコンテナFlex Containerの幅を超える場合の図
まゆえる
まゆえる
  • flex-wrap : nowrap
  • flex-wrap : wrap
  • flex-wrap : wrap-reverse

この3つの値を指定できるよ

flex-wrap : nowrap

flex-wrapの初期値であるnowrapは、何も指定しなければはみ出したところは折り返さず、それぞれの幅が均等に縮んで収まります

flex-wrap : nowrapの図解
まゆえる
まゆえる

wrapを翻訳したら「ラップ」ってでてきたけどあのラップ?!「ラップで包む感じ」ってことかな!

flex-wrap : wrap

wrapは、はみ出したところを折り返したい場合に指定します。

要素は主軸に沿って並べらていくので、以下の画像では左から右へ並べられていきます。

コンテナの幅から要素があふれたら、交差軸の方向に沿って新しいコンテナが作られます。この場合は上から下方向へ作られています。

そして、また主軸に沿って左から右へ要素が並べられていきます。

flex-wrap : wrapの図解

flex-wrap : wrap-reverse

flex-wrapでも、他のプロパティ同様にwrap-reverseという指定で反転させることができます。このwrap-reverseを指定すると交差軸の向きが反転します。

以下の画像では、要素が主軸に沿って左から右へ並べられていき、あふれたら交差軸の方向に沿って下から上の順番で新しいコンテナが作られていきます。

そのため、あふれた要素は新しく作られた上のコンテナの左に配置されます。

flex-wrap : wrap-reverseの図解
まゆえる
まゆえる

まゆえるは頭が混乱してきたけど、主軸と交差軸の向きって大事だね!

align-contentプロパティ

align-contentプロパティは、align-itemsプロパティ同様に交差軸方向で要素(Flex Item)を揃えたい場合に指定するプロパティです。

たとえば、以下の画像のように要素が折り返されていてなおかつ交差軸方向に余裕があるとします。

このような場合に交差軸方向で要素を揃えたい場合にalign-contentを使用します。

要素が折り返されていてなおかつ交差軸方向に余裕がある場合の図
まゆえる
まゆえる
  • align-content : flex-start
  • align-content : flex-end
  • align-content : center
  • align-content : space-between

alignってなってるから交差軸のプロパティだね!

align-content : flex-start

上の画像のような配置を、交差軸の始点で揃えたい場合にflex-startを指定します。ここでは交差軸の方向は上から下へ向いているので上揃えになります。

align-content : flex-startの図解
まゆえる
まゆえる

なんだかパターンがわかってきた気がするね!

align-content : flex-end

flex-endは、flex-startと同様に交差軸の終点で揃えたい場合に指定します。ここでは交差軸の方向は下から上へ向いているので下揃えになります。

align-content : flex-endの図解

align-content : center

centerを指定すると、交差軸に対して中央揃えになります。

align-content : centerの図解

align-content : space-between

space-betweenを指定すると、中央に余った余白が配分される仕組みになっています。

align-content : space-betweenの図解

flex-flowプロパティ

flex-directionプロパティとflex-wrapプロパティは、flex-flowプロパティで一括指定することができます。

flex-direction : row

flex-wrap : wrap

と指定したい場合、flex-flow : row wrap と一緒に書いても同じ指定になります。両方指定する場合はこちら使うことで1行分ですがコードが短くなり、見やすくなるのではないでしょうか。

まゆえる
まゆえる

flowは「流れ」っていう意味なんだね!よく「フロー」って見かけてたけどわかったふりして調べたことなかったよ...

さいごに

ここまでは理解できましたでしょうか?ドットインストールでは動画を視聴しながら一緒に手を動かして学習できるので本当におすすめです!

まゆえるは自分で書いているにもかかわらず理解できていない気もしますが、次回は「Flex Itemに指定できるプロパティ」についてまとめていきたいと思います。

こういった知識は実際にオリジナルのレスポンシブサイトを作ったりと手を動かすことでより理解が深まるかと思いますので、どんどんアウトプットしていきましょう!

そしてじゃんじゃんポートフォリオに掲載して転職活動なりクラウドソーシングなりをして成り上がっていきましょう!

ちなみにまゆえるはまだ模写コーディングもしたことがないレベルの初心者ですが、ポートフォリオサイトを作れるところまで這いつくばる予定です...!一緒に成長していきましょう!

まゆえる
まゆえる

ここまで読んでくださりありがとうございました!

初心者による初心者のためのフレックスボックス図解2初心者による初心者のためのフレックスボックス図解②【Flex Item編】

コメントを残す

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