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件)

人気の記事ランキング

【相対パスの通し方】ファイルや画像を読み込む方法


【本当に横並び?】floatプロパティについて


【ブラウザに表示されない?】PHPファイルのブラウザ表示方法


【何が原因?】PHPのエラーを理解しよう!


【PHP入門】GETとPOSTの違いについて


【表示切り替えができない?】タブ切り替えについて


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