flex は CSS の display プロパティの値です。inline-flex と同じく、要素に適用するとフレックスコンテナーになり、その要素の子要素はそれぞれフレックスアイテムになります。- アイテムはフレックスレイアウトに参加し、CSS フレックスボックスレイアウトで定義されているすべてのプロパティが適用されます。
flex プロパティもあり、これはフレックスボックスの flex-grow、flex-shrink、flex-basis の各プロパティの一括指定です。- このプロパティはフレックスコンテナーにのみ適用されます。
- フレックスボックスは、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである CSS flexible box layout module に対する一般的な通称です。
- この仕様書では、フレックスボックスはユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。
- フレックスボックスの重要な特徴が、フレックスレイアウト内のアイテムが伸縮することができることです。
- 余白はアイテム自体に割り当てることも、アイテムの間や周囲に配分することもできます。
- また、フレックスボックスはでは主軸や交差軸上の配置を指定することもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。
- フレックスボックスレイアウトは、
flex または inline-flex を親要素の display プロパティの値に使用することで定義されます。 - この要素はフレックスコンテナーとなり、その子要素それぞれはフレックスアイテムとなります。
- 値に
flex を指定すると、この要素は ブロックレベルのフレックスコンテナー となり、inline-flex を指定すると、 インラインレベルのフレックスコンテナー となります。 - これらの指定は、その要素に対するフレックス整形コンテキストを作成します。
- これはブロック整形コンテキストと、不動要素がコンテナーの中に侵入せず、コンテナーのマージンがアイテムのマージンとの間で相殺されないという点で似ています。
- フレックスコンテナー（display: flex または display: inline-flex が設定された要素）の直下の子要素はフレックスアイテムとなります。
- フレックスコンテナー内で直下に続くテキストもフレックスアイテムになります。