開始7日目　Flexbox

スキルゼロ知識ゼロ経験ゼロからWeb制作で稼げる様になりたい！

気づいたら一週間経過。毎日の継続は嘘をつかない。

最初は意味不明だったコードにも慣れてきて、わからないまま進み続けるのも重要だと感じました。

前日のレスポンシブデザインと合わせて使用するコードの学習まとめです。

Flexboxとは

過去にfloatを使って要素を横並びにすることがありましたが、

それが簡単になる、ような認識で良いと思います。

displayコードを使用する。

display: flex;　親要素に指定して横並びにできます
flex-direction: column;　親要素に指定して縦並びにできます。。
flex-wrap: wrap;　親要素に指定して折り返す様に設定できます。
（折り返しはwidthも必要です。50％なら1：1、25％なら1/4ずつのように配置できます。
flex: auto;　子要素を指定して幅を自動で合わせます。

レスポンシブデザインで設定

Flexboxを使う意味はこれが大きいのではないかと思います。

前日に学んだメディアクエリ【(max-width: xx;)】の中に上述のコードを指定することで、

画面幅に合わせて配置を設定することができる様になります。

まとめ

今回は画面のレイアウトを整えるFlexboxについて。

過去にfloatを使用して横並びにしていましたが、それを簡単にしてくれます。

画面幅によって配置を変更するレスポンシブデザインと相性が良さそうなコードでした。

メディアクエリ、displayコードの暗記と、どの要素を指定するのかが重要になりそうです。