現代Webデザインの基本！CSS Flexboxの使い方を徹底解説　Part1-基本編-

CSS Flexbox（Flexible Box Layout Module）とはCSS3から導入された柔軟なレイアウトを実現できるCSSの新しいレイアウトモジュールです。

近年、モバイルデバイスの普及により様々な画面サイズにWebサイトを適応させなくてはいけなくなり、レスポンシブデザインへの対応は必須です。

以前であれば、要素の横並びにfloatやinline-blockなどを使用していたかもしれませんが、正直時代遅れであるといっていいでしょう。

そんな面倒なことはしなくても、このFlexboxを使えば簡単に、しかも少ないコードで実現させることができます！

では実際にFlexboxの使い方を複数パートに分けてみていきましょう。

Flexboxの基本

Flexboxは2つの要素によって構成されています。

それが

• Flexコンテナ（親要素）
• Flexアイテム（子要素）

です。

まずはこのイメージを持っておきましょう。

次に例として、以下のようなHTMLを用意しましょう。

すると子要素が縦に並んでいると思います。

ではこの親要素であるcontainerクラスに display: flex;を指定してみましょう。

すると要素が横並びになりましたね！

こんなに簡単に要素を横並びにすることができました。便利ですよね！

これでFlexboxの基本は把握できたかと思います。

次回のPart2からは、Flexboxの様々なプロパティについて説明していこうと思います。

では、また次回！