これで完璧！CSS Flexboxを攻略しよう！

こんにちは、ゆうきです。

前回の「とても便利！CSS Flexboxの使い方を徹底解説」をご覧いただきましたか？

こちらの記事では前回の「後編」のようなものなので、まだ前回の記事を見てない人はまず下記の記事をご覧ください。

programmingkun.hatenablog.com

前回はCSS Flexboxの基本的な使い方とコンテナに使用できるプロパティ一覧を説明しました。

そこで今回は実際にCSS Flexboxをどうやって使っていくのか、コンテナとアイテムの使い方を徹底解説します。

コンテナに使用できるプロパティ一覧

前回のおさらいなので軽くまとめると、

・flex-direction

　　アイテムの並び順を指定する

・flex-wrap

　　アイテムの折り返しを指定する

・flex-flow

 　　アイテムの並び順と折り返しを一括で指定する

・justify-content

　　アイテムの水平方向の位置を指定する

・align-items

　　アイテムの垂直方向の位置を指定する

・align-content

　　アイテムの行の垂直方向の位置を指定する

となります。

今後このプロパティ一覧も伏せて使い方を説明していきます。

アイテムの並び順｜flex-direction

flex-directionはアイテムを配置する向きを指定するプロパティです。

flex-directionが取る値は、下記の通りです。

・row（デフォルト）

　　　アイテムを水平方向に左から右へと配置

・row-reverse

　　　アイテムを水平方向に右から左へと配置

・column

　　　アイテムを垂直方向に上から下へと配置

・column-reverse

　　　アイテムを垂直方向に下から上へと配置

flex-direction: row;（デフォルト）

アイテムが水平方向に左から右へと配置されます。

基本帝に全ての書き方は下記の通りですので、他の箇所は省略しています。

flex-direction: row-reverse;

アイテムが水平方向に右から左へと配置されます。

flex-direction: column;

アイテムが垂直方向に上から下へと配置されます。

flex-direction: column-reverse;

アイテムが垂直方向に下から上へと配置されます。

アイテムの折り返し｜flex-wrap

flex-wrapは、アイテムの折り返しを指定するプロパティです。

・nowrap（デフォルト）

　　　　　アイテムを折り返さずに一列に配置

・wrap

　　　　　複数行のアイテムを上から下へと配置

・wrap-reverse

　　　　　複数行のアイテムを下から上へと配置

flex-wrap: nowrap;（デフォルト）

アイテムを折り返さずに、一列に配置します。

flex-wrap: wrap;

アイテムを折り返して複数行に上から下に並べます。

flex-wrap: wrap-reverse;

アイテムを折り返して、複数行に下から上に並べます。

アイテムの並び順と折り返しを一括指定｜flex-flow

flex-flowは、flex-directionとflex-wrapを一括で設定するプロパティです。

記述するときは、下記のように記述します。

実際に値を入れると、下記のようになります。

水平方向の位置｜justify-content

justify-contentは、水平方向の位置を指定するプロパティです。

justify-contentは、下記の値を指定することができます。

・flex-start（デフォルト）

　　　　　　アイテムを左揃えで配置

・flex-end

　　　　　　アイテムを右揃えで配置

・center

　　　　　　アイテムを左右中央揃えで配置

・space-between

　　　　　　両端のアイテムを余白を空けずに配置し、

　　　　　　他の要素は均等に間隔を空けて配置

・space-around

　　　　　　両端のアイテムも含めて、

　　　　　　均等な間隔を空けて配置

juntify-content: flex-start;（デフォルト）

アイテムを左揃えで表示します。

juntify-content: flex-end;

アイテムを右揃えで表示します。

justify-content: center;

アイテムを左右中央揃えで表示します。

juntify-content: space-between;

両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置します。

juntify-content: space-around;

両端のアイテムも含めて、均等な間隔を空けて配置します。

垂直方向の位置｜align-items

align-itemsは、要素の垂直方向の位置を指定するプロパティです。

align-itemsでは、下記の値を指定することができます。

・stretch（デフォルト）

　　　　　アイテムを上下の余白を埋めるように配置

・flex-start

　　　　　アイテムの行を上揃えで配置

・flex-end

　　　　　アイテムの行を下揃えで配置

・center

　　　　　アイテムの行を上下中央揃えで配置

・baseline

　　　　　アイテムをベースラインに合わせて配置

align-items: stretch;（デフォルト）

アイテムの上下の余白を埋めるように配置します。

align-items: flex-start;

アイテムを上揃えで配置します。 

align-items: flex-end;

アイテムを下揃えで配置します。

align-items: center;

アイテムを上下中央揃えで配置します。

align-items: baseline;

アイテムをベースラインに合わせて配置します。 

複数行の時の垂直方向の位置｜align-content 

align-contentは、複数行の時の垂直方向の位置を指定するプロパティです。

align-contentでは、下記の値を指定することができます。

・stretch（デフォルト）

　　　　　アイテムの行が余白を埋めるように配置

・flex-start

　　　　　アイテムの行を上揃えで配置

・flex-end

　　　　　アイテムの行を下揃えで配置

・center

　　　　　アイテムの行を上下中央揃えで配置

・space-between

　　　　　最上行と最下行のアイテムが余白を

　　　　　空けずに配置し、他のアイテム行は

　　　　　均等に間隔を空けて配置

・space-around

　　　　　すべてのアイテム行が均等に

　　　　　間隔を空けて配置

align-content: stretch;（デフォルト）

アイテムの行が余白を埋めるように配置されます。

align-content: flex-start;

アイテムの行を上揃えで配置されます。

align-content: flex-end;

アイテムの行を下揃えで配置されます。

align-content: space-between;

最上行と最下行のアイテムが余白を空けずに配置され、他のアイテム行は均等に間隔を空けて配置されます。

align-content: space-around;

すべてのアイテム行が均等に間隔を空けて配置されます。

まとめ

今回は、CSS Flexboxのコンテナ、アイテムの使い方について説明しました。

でも、実は今回は説明したアイテムはあくまでもコンテナで使用するプロパティに使うものたちだったので一部しか紹介できていないんです。

もし、CSS Flexboxのアイテムの便利なプロパティを知りたい！という方は下記の記事をご覧ください。

現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ

詳しくはこちらの記事をご覧ください。

programmingkun.hatenablog.co