プログラミング初学者が、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」について学習して理解しなくても大丈夫そうです。
コメント