Flex-Grow、Flex-Shrink、およびFlex-Basisの理解

CSS flex-grow 、 flex-shrink 、 flex-basis特性の相互作用を深く理解してください。 CSS属性を適用すると、舞台裏で多くのことが起こります。たとえば、次のHTMLがあるとします。

<div>
  <div>子供</div>
  <div>子供</div>
  <div>子供</div>
</div>

次に、いくつかのCSSを書きます：

 。親 {
  ディスプレイ：Flex;
}

実際、CSSコードの上記の行に加えて、次のスタイルを自分で書いたかのように、 .child要素に一連の属性を暗黙的に適用します。

 。子供 {
  フレックス：0 1 Auto; /*デフォルトのフレックス値*/
}

これは、一部のプロパティには、当社がオーバーライドすることを目的としたデフォルト値があるためです。これらの暗黙のアプリケーションのスタイルを理解しないと、レイアウトは非常に混乱し、管理が困難になる可能性があります。

flex属性は、3つの独立したCSS属性を同時に設定する速記CSS属性です。したがって、上記の略語は以下に相当します。

 。子供 {
  フレックスグロー：0;
  Flex-Shrink：1;
  Flex-basis：auto;
}

略語属性は、複数のCSS属性をバンドルするため、 background属性と同様に、複数の属性を一度に記述するのが便利です。

FlexBoxでは、 flex属性とそのサブプロパティの間に複雑な相互作用があるため、略語を使用することをお勧めします。

ほとんどの場合、これらのフレックスボックスプロパティの詳細を知る必要がないため、デフォルトのスタイルは非常に便利です。たとえば、FlexBoxを使用する場合、通常、次のように書きます。

 。親 {
  ディスプレイ：Flex;
  justify-content：space-bethed;
}

子どもの要素やスタイルに適用されるスタイルを気にする必要さえありません。しかし、これはFlexBoxの氷山の一角にすぎません。

flex-grow 、 flex-shrink 、 flex-basisプロパティなどのFlexBoxがどのように機能し、それらを使用してより複雑なレイアウトを作成する方法を深く掘り下げたいとしたらどうでしょうか。

簡略化された概要から始めて、子要素に適用されるデフォルトのflex属性に戻りましょう。

 。子供 {
  フレックス：0 1 Auto;
}

これらのデフォルトスタイルは、子要素にストレッチと縮小の方法を伝えます。私は通常、これらの略語の特性を次のように理解しています。

 /*心の上の上記のルールについてどう思いますか*/

。子供 {
  Flex：[Flex-Grow] [Flex-Shrink] [Flex-Basis];
}

/* または... */

。子供 {
  フレックス：[最大] [最小] [理想的なサイズ];
}

最初の値flex-growデフォルトで0になります。つまり、要素は（ほとんど）拡張されません。要素のサイズは、コンテンツに依存します。例えば：

 。親 {
  ディスプレイ：Flex;
}

flex-grow属性のデフォルト値を0から1に変更した場合：

 。子供 {
  フレックス：1 1 Auto;
}

その後、すべての要素は、 .parent Elementのスペースを均等に分配しますが、その内容が同じ長さである場合にのみです。これは次のとおりです。

 。子供 {
  フレックスグロー：1;
}

要素の1つを他の要素よりも成長させたい場合は、これを行うことができます。

 .child-three {
  フレックス：3 1 Auto;
}

/* または... */

.child-three {
  フレックスグロー：3;
}

flex-shrink略語の2番目の値です。

 。子供 {
  フレックス：0 1 Auto; / * flex-shrink = 1 */
}

flex-shrinkブラウザに要素の最小サイズを指示します。デフォルト値は1です。つまり、同じスペースが常に占有されています。 0に設定する場合：

 。子供 {
  フレックス：0 0 Auto;
}

要素は縮小しません。

flex-basis 、デフォルトでflex略語に最後に付加された最後の値であり、これは要素に理想的なサイズを維持するように指示します。デフォルトの値はautoです。これは「私の高さまたは幅を使用する」を意味します。

flex-basisを1000pxに設定したとき：

 .child-three {
  フレックス：0 1 1000px;
}

ブラウザに、1000pxのスペースを占有しようとするように指示します。不可能な場合、要素は他の要素に基づいて比例してスペースを占有します。

要素が縮小しないようにしたい場合：

 .child-three {
  フレックス：0 0 1000px;
}

flex-wrapプロパティを設定すると、レイアウトが変更されます。

 。親 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
}

全体として：

• flexの略語を使用してみてください。
• 略語を使用する場合、最大、最小、理想的なサイズを覚えておいてください。
• 要素コンテンツは、これらの値の仕組みにも影響します。

以上がFlex-Grow、Flex-Shrink、およびFlex-Basisの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。