2023年02月22日
【Flexプロパティ一覧】flexに関するプロパティまとめ
Lesson4
HTML/CSS
,flex
webサイト制作時、要素を横並びにするために「flex」のプロパティを使用することが多いかと思います。
「flex」を設定したけど、そこからの詳細設定はどうすればいいんだっけ？
といった疑問を持った方も少なくないのではないでしょうか。
今回は、そんな方のためにflexに関するプロパティをまとめてみました！
先ず初めに、「フレックスコンテナー」と、「フレックスアイテム」について復習しましょう。
■フレックスコンテナー（親）
⇒「display: felx;」を適用させた要素のことを、フレックスコンテナーと呼びます。
■フレックスアイテム（子）
⇒フレックスコンテナーの「子要素」を、フレックスアイテムと呼びます。
※子孫要素は含まない！
「flex」を設定したけど、そこからの詳細設定はどうすればいいんだっけ？
といった疑問を持った方も少なくないのではないでしょうか。
今回は、そんな方のためにflexに関するプロパティをまとめてみました！
先ず初めに、「フレックスコンテナー」と、「フレックスアイテム」について復習しましょう。
■フレックスコンテナー（親）
⇒「display: felx;」を適用させた要素のことを、フレックスコンテナーと呼びます。
■フレックスアイテム（子）
⇒フレックスコンテナーの「子要素」を、フレックスアイテムと呼びます。
※子孫要素は含まない！
【flexに関するプロパティ一覧】
■フレックスコンテナーに指定するプロパティ
- flex-wrap … フレックスアイテムの折り返しを指定。
- flex-direction … フレックスコンテナーの主軸の方向を指定。（基本：左から右 = 横並び）
- justify-content … フレックスアイテムの主軸方向（基本：横）の揃え位置の指定。
- align-items … フレックスアイテムのクロス軸方向（基本：縦）の揃え位置の指定。
■フレックスアイテムに指定するプロパティ
- flex-grow … フレックスアイテムの伸び率を指定。
- flex-shrink … フレックスアイテムの縮み率を指定。
- flex-basis … フレックスアイテムの幅を指定。
今回は、よく使用するプロパティのみを抜粋しましたが、他にも様々なプロパティが存在します。
実際に使用したいプロパティがあった場合は、値の指定方法などを自分で調べてみてくださいね！
参考url
https://zero-plus.io/media/css-flexbox-commentary/
スマブレ
コメントする
コメント（全0件）