勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS・Flexbox編

今回は、HTML&CSS・Flexbox編の復習記録となります。

　Flexboxとは、CSSのレイアウト方法の1つである。

　並び向き（縦並び→横並び）の指定や、折り返し（なし→あり）の指定を簡単に行う

　ことが出来る様になる。

　「display: flex」は指定した子要素を横並びにする。

　横並びにしたい要素の親要素に「display: flex」を指定する。

　「flex: auto」では、指定した要素の幅を親要素に合わせて伸縮することが出来る。

　親要素の幅に合わせて伸ばしたい要素に「flex: auto」を指定する。

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

　折り返したい要素の親要素に「flex-wrap: wrap」を指定する。折り返したい要素自身

　には、列数に応じたwidthを指定する。

　高さや幅を「％」で指定すると、親要素に対してどれくらいの割合にするかを指定す

　ることが出来る。

　また、メディアクエリと合わせて使用すると、画面幅が狭くなった際にそのサイズに

　合わせて折り返しを有効にすることが出来る。

　「flex-direction: column」は、子要素を上から下に並べる。

　並べたい要素の親要素に、「flex-direction: column」を指定する。

　スマートフォン対応にする際などは、「margin: 0 auto;」を併せて指定することで、

　中央に寄せる。

　通常の中央寄せはwidthも指定するが、メディアクエリと合わせて使用する際にはメ

　そこで指定している画面幅が適用されるので、ここではmarginのみを指定する。

ということで、本日はここまで。

次回からは「Progate：JavaScriptコース」の復習を記録していきたいと思います。

ご一読を頂きまして、有り難うございました。