CSS【 Flexbox編 】

こんにちは。

今回も、CSSについて学んだことを共有していきます。

1.要素を横並びにしよう

display: flexは指定した要素の子要素を横並びにします。
横並びにしたい要素の親要素にdisplay: flexを指定します。

2.横並びにした要素を画面幅いっぱいに広げよう

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

3.要素を2列に折り返そう

flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。
折り返したい要素の親要素にflex-wrap: wrapを指定します。折り返したい要素自身には列数に応じたwidthを指定します。

4.画面幅を狭めた時に1列に並ぶようにしよう

flex-direction: columnは子要素を上から下へ並べます。
縦に並べたい要素の親要素にflex-direction: columnを指定します。

まとめ

Flexboxを使うと簡単に要素に効果をつけられるみたいなので頑張って覚えていこうと思います。

今後もHTMLやCSSについて学んだことがあればnoteで共有していこうと思います。
お楽しみに！