【初学者向け】Flexboxは学んだほうがいいという話

こんにちは。シュンです。夏も終わりかけて涼しくなってきましたね。
今回はこの間からProgateで追加され話題になった「Flexbox」のカリキュラムについてお話します。

Flexboxについて学ぼうと思ってる人
HTML/CSSについて学習している人

そんな方に是非オススメなのがこちらの「Progate 学習コースFlexbox編」です。

Flexboxとは?

CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。
細かい箇所を自動で調整してくれたり、簡単にレイアウトを作成することができます。
レスポンシブの調節にも使えるし大変便利です。

折り返しあり

折り返しなし

ボックスを横並びにするとボックスの大きさによってこんな感じで折り返しを自動でやってくれます。
また、状況によって縦並びに変えることも可能です。

実際にやってみた

「Progate 学習コースFlexbox編」学んだのは以下の通りです。

  • display:flex(横並び)
  • flex:auto(親要素に合わせてサイズ変更)
  • flex-wrap:wrap(子要素のサイズに合わせて折り返し)
  • flex-direction(子要素を上から下に並べる)

コースも一つしかなく、全部で6段階しかなかったので順調に終わらせれば時間はかからないと思います。
大まかに言うとdisplay:flexで横並びにしflex:autoで親要素に合わせて大きさを変えるFlexboxの実装とレスポンシブについて学ぶことができました。

HTML/CSSのコースが終わってからやったほうがより理解がしやすいと思いますが
わからないところがあってもスライドを確認しつつコードを書いて行けばできます。(ほぼ答えです)
流石progateと言いたくなるほどわかりやすい図と説明ですので初見の人でも理解しやすいです。

上記で書いた通りレスポンシブについても学べます。
実際に「max-width」を設定することでブラウザの大きさに合わせて自動で折り返すのを体験できます。

実際にやってみると良さがわかるのでやって欲しいです。

まとめ

 Flexboxとはレイアウトに合わせてボックスの並びを調節できる

 「Progate」のコースで実践してみる

「Progate」で学んだあとは実際にコードを書き起こしてサイトを制作してみるのもいいかもしれません。
Flexboxが学べればレスポンシブのレイアウトを考える時に非常に助けになります。

皆さんいかがでしたでしょうか?最後までみていただきありがとうございました!
次回にブログ投稿もお楽しみに!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA