TechCodeview

CSS の flex プロパティは次の短縮形です。 フレックスグロー、フレックスシュリンク、 そしてフレックスベース。これはフレックス項目でのみ機能するため、コンテナーの項目がフレックス項目ではない場合、 フレックス プロパティは対応する項目には影響しません。

このプロパティは、柔軟な項目の長さを設定するために使用されます。この CSS プロパティを使用すると、子要素とメイン コンテナの配置が簡単になります。これは、スペースに合わせてフレックスアイテムがどのように縮小または拡大するかを設定するために使用されます。

の フレックス プロパティは 1 つ、2 つ、または 3 つの値で指定できます。

• 1 つの値の構文がある場合、値は数値または次のようなキーワードのいずれかである必要があります。 なし、自動、 または イニシャル 。
• 2 つの値の構文がある場合、最初の値は数値でなければなりません (次のように使用されます)。 フレックスグロー )、2 番目の値は数値 (次の目的で使用されます) のいずれかになります。 フレックスシュリンク ) または有効な幅の値 (として使用されます) フレックスベース ）。
• 3 つの値の構文がある場合、値は次の順序に従う必要があります。 番号 のために フレックスグロー、 ある 番号 のために フレックスシュリンク、 そして有効な 幅 の価値 フレックスベース 。

構文

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

プロパティ値

フレックスグロー: これは、flex-grow 係数を決定する単位のない正の数です。他の柔軟なアイテムと比較してアイテムがどれだけ成長するかを指定します。負の値は許可されません。省略した場合は、次の値が設定されます。 1 。

フレックスシュリンク: フレックス収縮率を決定するのは、単位のない正の数値です。他の柔軟な項目と比較して項目がどの程度縮小するかを指定します。負の値は許可されません。省略した場合は、次の値が設定されます。 1 。

フレックスベース: これは、フレックス項目の初期長さを定義する相対単位または絶対単位の長さです。フレックス項目の長さを設定するために使用されます。その値は次のとおりです。 車、継承、 または、次のような数値の後に長さの単位が続きます。 em、ピクセル、 など。負の値は許可されません。省略した場合は、次の値が設定されます。 0 。

自動: flex プロパティのこの値は、 1 1オート 。

なし： flex プロパティのこの値は、 0 0 自動 。フレックス項目は拡大も縮小もしません。

イニシャル： プロパティをデフォルト値に設定します。と同等です 0 0 自動 。

継承: 親要素からプロパティを継承します。

例

この例では、コンテナーが 3 つあり、それぞれに 3 つのフレックス項目があります。の 幅 そしてコンテナの高さは 300ピクセル そして 100ピクセル 。

を適用しています。 フレックス: 1; 最初のコンテナのフレックスアイテムに、 フレックス: 0 50ピクセル; 2 番目のコンテナのフレックス項目に、そして フレックス: 2 2; 3 番目のコンテナの flex-item に追加します。

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

出力