ここではオンライン学習サイト「プロゲート」の学習内容をまとめていきます。

HTML & CSS Flexbox編

1.目標物を確認しよう

Flexboxを学ぼう
・このレッスンではCSSを使ったレイアウト方法の1つであるFlexboxを学んでいく
・学習する内容はFlexboxのたくさんあるプロパティの中でも、特によく利用されるもの
・Flexboxはとても便利なので、しっかり身につける

Flexboxでできること
Flexboxを使うと今まではfloatで作っていた横並びを、もっと簡単に作れるようになる

2.display:flex

display: flexとは
・display: flexは指定した要素の子要素を横並びにする

display: flexの使い方
・横並びにしたい要素の親要素にdisplay: flexを指定する

3.flex: auto

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

flex: auto の使い方
・親要素の幅に合わせて伸ばしたい要素にflex: autoを指定する

4.flex-wrap: wrap

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

flex-wrap: wrap の使い方
・折り返したい要素の親要素にflex-wrap: wrapを指定する
・折り返したい要素自身には列数に応じたwidthを指定する
・今回は2列にしたいのでwidth: 50%を指定する

割合を使ったサイズの指定の復習
・高さや幅を%で指定すると、親要素に対してどのくらいの割合にするかを指定できる

5.メディアクエリ

メディアクエリと合わせて使おう
・レスポンシブデザインにするために、HTML＆CSSの上級編で学習したメディアクエリを使う
・画面幅が狭くなったときに折り返しを有効にできる

6.flex-direction

flex-direction: columnとは
・flex-direction: columnは子要素を上から下へ並べる

flex-direction: columnの使い方
・縦に並べたい要素の親要素にflex-direction: columnを指定する

ブロック要素の中央寄せの復習
・margin: 0 autoとwidthを指定することで中央寄せにする
・widthは画面幅1000px以下の時に指定したものがそのまま適用されているので、ここではmarginのみを指定する

メディアクエリと合わせて使おう
・メディアクエリを合わせて設定すると、画面がさらに狭くなったときに縦方向に並べることができる

⇒完成作品