2023年02月22日

【Flexプロパティ一覧】flexに関するプロパティまとめ

Lesson4

HTML/CSS

,

flex

webサイト制作時、要素を横並びにするために「flex」のプロパティを使用することが多いかと思います。
「flex」を設定したけど、そこからの詳細設定はどうすればいいんだっけ?
といった疑問を持った方も少なくないのではないでしょうか。
今回は、そんな方のためにflexに関するプロパティをまとめてみました!

先ず初めに、「フレックスコンテナー」と、「フレックスアイテム」について復習しましょう。

フレックスコンテナー(親)
⇒「display: felx;」を適用させた要素のことを、フレックスコンテナーと呼びます。

フレックスアイテム(子)
⇒フレックスコンテナーの「子要素」を、フレックスアイテムと呼びます。
   ※子孫要素は含まない!


【flexに関するプロパティ一覧】

フレックスコンテナーに指定するプロパティ

フレックスアイテムに指定するプロパティ


今回は、よく使用するプロパティのみを抜粋しましたが、他にも様々なプロパティが存在します。
実際に使用したいプロパティがあった場合は、値の指定方法などを自分で調べてみてくださいね!

参考url

https://zero-plus.io/media/css-flexbox-commentary/

スマブレ

コメント(全0件)

人気の記事ランキング

【質問】制作データの持ち主を問わずリンクを機能させる方法


【なぜ必要なの?】GUIではなくコマンドが必要な理由


【フォームの種類を決めよう!】inputタグのtype属性について


【正しく順番指定!】nth-of-typeとnth-childの使い方について