CSS3のFlexレイアウトについて詳しく解説

1. Order 属性

order 属性はアイテムの順序を定義します。値が小さいほどランクが高くなります。デフォルトは 0 です。

2. flex-grow 属性

flex-grow 属性は項目の拡大率を定義します。デフォルトは 0、つまり、スペースが残っている場合は拡大されません。

すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。

3. flex-shrink 属性

flex-shrink 属性は、アイテムの縮小率を定義します。つまり、スペースが不十分な場合、アイテムは縮小します。

すべてのアイテムのフレックスシュリンクプロパティが 1 の場合、スペースが不十分な場合、それらはすべて比例して縮小されます。 1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。このプロパティには負の値は無効です。

4. flex-basis 属性

flex-basis 属性は、余分なスペースを割り当てる前にアイテムが占める主軸スペース (メイン サイズ) を定義します。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。

幅または高さの属性と同じ値 (350px など) に設定すると、アイテムは固定スペースを占有します。

5. Flex 属性

flex 属性は、flex-grow、flex-shrink、flex-basis の略称で、デフォルト値は 0 1 auto です。最後の 2 つのプロパティはオプションです。

6. align-self 属性

align-self 属性を使用すると、単一の項目に他の項目とは異なる配置を指定でき、align-items 属性をオーバーライドできます。デフォルト値は auto で、親要素がない場合は、親要素の align-items 属性を継承します。この属性は 6 つの値を取ることができます。auto を除き、その他の値は align-items 属性とまったく同じです。

以上がCSS3のFlexレイアウトについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。