HTML フロントエンド開発への道 -- フレキシブル ボックス model_html/css_WEB-ITnose

フレキシブル ボックス モデル (フレキシブル ボックス) は、コンテナ内の項目の配置、方向、並べ替えを実現するために使用される、CSS3 の新しいレイアウト モジュールです。

フレキシブル ボックス モデルの最大の特殊効果は、さまざまな画面サイズで適切なレイアウトに合わせて、サブ要素の幅と高さを動的に変更します。

以下は、フレックス ボックス モデルの要素の基本概念です。

フレックス ボックス モデルのプロパティの概要:

1. flex-direction 属性の概要

   例:

2. flex-wrap 属性の概要

3. flex-flow 属性の概要

   フレックスフロー属性は、flex-direction と flex-wrap の 2 つの属性の複合属性です。 space-around 属性について言及する価値があります。

   space-around: 各項目の両側のスペースが等しいです。したがって、項目間の距離は、項目と境界線の間の距離の 2 倍になります。

例:

4. align-items 属性の概要

   例:

5. align-items 属性の概要content 属性

6. 以下は、elastic サブ要素のプロパティを紹介します:
   order 属性の概要

order 属性は、値が小さいほど、項目の順序を定義します。値は負の値にすることができ、デフォルト値は 0 です。

flex-grow 属性の概要

flex-grow 属性は、項目の拡大率を定義するために使用されます。デフォルトは 0 です。値は許可されません。つまり、残りのスペースがある場合、拡張されません。

1. flex-shrink 属性 概要

flex-shrink 属性は、プロジェクトの縮小率を定義するために使用されます。デフォルトは 1 で、負の値は許可されません。値はカスタム値または auto

2. flex 属性の概要

flex は flex-grow、flex-shrink、および flex-basis の複合属性値です。

3. align-self 属性の概要

5. align-self 属性は、デフォルトの align-items 属性をオーバーライドするために使用されます。 value は auto です。これは、親要素から align-items の値を継承することを意味します。