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

CODE

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

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

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

Flexboxとは

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

FlexBoxでできること

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

横並びにしたい

引用:Progate

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

横並びにした要素を画面幅いっぱいに広げたい

引用:Progate

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

二列に折り返したい

引用:Progate

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

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

引用:Progate

引用:Progate

引用:Progate

上から下へ一列で並べたい

引用:Progate

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

メディアクエリと合わせて使いたい

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

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

引用:Progate

引用:Progate

引用:Progate

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

コメント