FlexBox レイアウトを簡単にできる使い方を紹介

プログラミング初学者が、HTML,CSSを学習していくときに「float」という壁に打ち当たります。

CSSでサイトをレイアウトするとき、floatの使い方がいまいち難しくて、配置したい所にコンテンツを配置できないという、もどかしい気持ちになることがあると思います。

そんな時は、FlexBoxを活用しましょう！

Flexboxとは

CSSのレイアウト方法の一つで、floatで作っていた横並びを、もっと簡単に作れることができます。

Flexboxを使うと下記のようなレイアウトを簡単に組むことができます。

引用：Progate

やり方：横並びにしたい要素の親要素にdisplay: flexを指定します。

引用：Progate

flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。

引用：Progate

flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。

親要素に対して子要素にサイズの指定をします。高さや幅を%で指定すると、親要素に対してどのくらいの割合にするかを指定することができます。

引用：Progate

引用：Progate

やり方：縦に並べたい親要素にflex-direction: columnを指定します。

最後にレスポンシブデザインにするために、メディアクエリと合わせて完成です。

画面幅が狭くなった時には、折り返しを有効にし、さらに画面幅が狭くなった時には、一列にすることができます。

引用：Progate

こんなに簡単にできたら、作業が捗りますよね。一所懸命「float」について学習して理解しなくても大丈夫そうです。