とても便利！CSS Flexboxの使い方を徹底解説
こんにちは、ゆうきです。
今回はCSS Flexboxについて解説してきます。
CSS Flexboxは細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができる超有能なものなんです。
CSS Flexboxは慣れてしまえば扱いやすいのですが、使い方に慣れるまで少し苦労することも多いです。
しかし、使用される頻度が高いのでこの記事でマスターしましょう！
CSS Flexboxとは？
CSS FlexboxはCSS3から導入されたレイアウトモジュールです。
要素を横並びで配置したいときなど、少し前ではfloatプロパティを使ってレイアウトを組む方法が一般的でしたが、
最近ではFlexboxを使って要素を横並びにする方法がよく使われるようになっています。
floatプロパティがFlexboxに変わってよく使われるようになったのも理由があります。
それは、floatプロパティよりも簡単なコードでレイアウトが組むことができ、作業効率の向上に繋がるからです。
他にもレスポンシブレイアウトに強いなど、Flexboxが使えるようになればかなり強いです。
CSS Flexboxの基本
CSS Flexboxは、
- コンテナ（親要素）
- アイテム（子要素）
という２つの要素によって構成されます
Flexboxを使用する場合には、HTMLファイルにまず親要素となるコンテナ（f-container) を作成し、その中に子要素となるアイテム（f-item)を作ります。
Flexboxレイアウトを使用する場合には、CSSファイルで親要素（コンテナ）に
display:flex
を指定します。
display:flex を指定するのは、親要素のコンテナなので間違えないようにしましょう。
Flexboxで細かくレイアウトを調整するときには、コンテナとアイテムにそれぞれプロパティを指定して調整を行います。
では、コンテナに指定できるそれぞれのプロパティ一覧をご紹介します。
※コンテナとアイテムそれぞれの詳しい説明は下記の記事をご覧ください
コンテナに使用できるプロパティ一覧
コンテナ（親要素、f-container）に使用できるプロパティは下記のとおりです。
・flex-direction
アイテムの並び順を指定する
・flex-wrap
アイテムの折り返しを指定する
・flex-flow
アイテムの並び順と折り返しを一括で指定する
・justify-content
アイテムの水平方向の位置を指定する
・align-items
アイテムの垂直方向の位置を指定する
・align-content
アイテムの行の垂直方向の位置を指定する
まとめ
CSSによるレイアウトの作成は、Web制作の基本中の基本ですが、正しく理解しておかないとレイアウト調整で手を焼くことになってしまいます。
Flexboxが使いこなせるようになると、どのようなレイアウトでも一通り作れるようになるでしょう。
今回はCSS Flexboxの使い方を主に解説しましたが、まだコンテナとアイテムのそれぞれの使い方を解説していないので、
次の「これで完璧！CSS Flexboxを攻略しよう！」の記事をご覧ください。
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
