CSS エラスティックボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりです。

フレックスレイアウトでは、親要素の幅が異なる場合、子要素は親要素のスペースをどのように分配しますか?

(注: これらの 3 つのプロパティは子要素に設定されます。次の記事では、フレックスレイアウト (display:flex) を持つ要素を指す親要素について説明します)

ここでのエディターは、次の 3 つの属性をすばやく覚える方法を説明します。

1 つ目は flex-basis です。basis は英語で「メインコンポーネント」を意味します。したがって、width と組み合わせると、width は確実に削除されます。basis が width と出会うと、私がメインコンポーネントで、あなたがセカンダリコンポーネントであるため、私を見たら脇に寄らなければならないということになります。

2 つ目は flex-grow です。grow の英語の意味は、<拡大、拡張、増加> です。つまり、親要素の幅が子要素の幅の合計よりも大きく、親要素に余裕がある場合、flex-grow は「拡大したい、拡大したい」と言います。どうすれば拡大できるでしょうか。もちろん、親要素のスペースを共有することで拡大できます。下の2番目の属性の内容を参照してください

最後は flex-shrink です。shrink は英語で <shrink> を意味します。これは、親要素の幅が子要素の幅の合計よりも小さく、親要素の幅を超えた場合に、flex-shrink が「外の世界はあまりにも苦しいので、お父さんの腕の中に戻ったほうがいい」と言うことを意味します。したがって、flex-shrink は一定の比率に従って縮小します。以下の 3 番目の属性を参照してください。

最初のプロパティ: flex-basis

この属性は要素の幅を設定するために使用されます。実際、width で幅を設定することもできます。要素に width と flex-basis の両方が設定されている場合、width の値は flex-basis によって上書きされます。

<スタイル タイプ="text/css" メディア="screen">
        。箱{
            ディスプレイ: フレックス;
            マージン:100px 自動;
            幅:400ピクセル;
            高さ:200px;
        }
        .インナー{
            幅:200px;
            高さ:100px;
            flex-basis:300px;
            背景:ピンク;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="inner">
    </div>
</div>
</本文>

下の図を参照してください。幅を width:200px; flex-basis:300px; に設定すると、サブ要素 .inner に属性 flex-basis; が適用されていることがわかります。

2番目のプロパティ: flex-grow

このプロパティは、親要素の幅がすべての子要素の幅の合計よりも大きい場合に、子要素が親要素の残りのスペースをどのように分配するかを設定するために使用されます (つまり、親要素に残りのスペースが残ります)。 flex-growのデフォルト値は 0 です。これは、要素が親要素の残りのスペースを要求しないことを意味します。値が 0 より大きい場合は、それを要求することを意味します。価値が大きければ大きいほど、要求も厳しくなります。

たとえば、親要素の幅は 400 ピクセルで、子要素 A と B の 2 つがあります。 A は幅 100 ピクセル、B は幅 200 ピクセルです。空きスペースは400-(100+200) = 100pxです。 A も B も残りのスペースを要求しない場合は、100 ピクセルの空きスペースが残ります。

<本文>
<div class="box">
    <div class="inner">
    </div>
    <div class="inner1">
    </div>
</div>
</本文>

。箱{
            ディスプレイ: フレックス;
            flex-direction: 行;
            マージン:100px 自動;
            幅:400ピクセル;
            高さ:200px;
            border:1px 赤一色;
 
        }
        .インナー{
            フレックスベース:100px;
            高さ:100px;
            背景:ピンク;
        }
        .inner1{
            フレックスベース:200px;
            高さ:100px;
            背景:青;
        }

下の図を参照してください。

A が残りのスペースを要求する場合: flex-grow を 1 に設定すると、B はそれを要求しません。 A の最終的なサイズは、それ自体の幅 (100 px) + 残りのスペースの幅 (100 px) = 200 px になります。

 .インナー{
            フレックスベース:100px;
            高さ:100px;
            背景:ピンク;
            フレックス成長:1;
        }
        .inner1{
            フレックスベース:200px;
            高さ:100px;
            背景:青;
        }

下の図を参照してください。

A と B の両方が残りのスペースを占有する場合、A は flex-grow を 1 に設定し、B は flex-grow を 2 に設定します。すると、A の最終的なサイズは、A の幅 (100px) + A によって得られる残りのスペースの幅 (100px (1/(1+2))) となり、B の最終的なサイズは、B の幅 (200px) + B によって得られる残りのスペースの幅 (100px (2/(1+2))) となります (ここではエディターは数式のみを示しています。友人は自分で計算できます)

.インナー{
            フレックスベース:100px;
            高さ:100px;
            背景:ピンク;
            フレックス成長:1;
        }
        .inner1{
            フレックスベース:200px;
            高さ:100px;
            背景:青;
            フレックス成長:2;
        }

下の図を参照してください。

3番目のプロパティ: flex-shrink

このプロパティは、親要素の幅がすべての子要素の幅の合計よりも小さい場合 (つまり、子要素が親要素を超える場合) に、子要素の幅をどのように縮小するかを設定するために使用されます。 flex-shrinkのデフォルト値は 1 です。親要素の幅がすべての子要素の幅の合計よりも小さい場合、子要素の幅が縮小されます。値が大きいほど削減量も大きくなります。値が 0 の場合、減少がないことを意味します。

たとえば、親要素の幅は 400 ピクセルで、子要素 A と B の 2 つがあります。 A は幅 200 ピクセル、B は幅 300 ピクセルです。すると、親要素を超える A と B の合計幅は (200+300)-400 = 100px になります。 A も B も幅を縮小しない場合、つまり両方とも flex-shrink を 0 に設定すると、親要素の幅は 100 ピクセルになります。

 。箱{
            ディスプレイ: フレックス;
            flex-direction: 行;
            マージン:100px 自動;
            幅:400ピクセル;
            高さ:200px;
            border:1px 赤一色;
 
        }
        .インナー{
            フレックスベース:200px;
            高さ:100px;
            背景：黒;
             フレックス収縮:0;
        }
        .inner1{
            flex-basis:300px;
            高さ:100px;
            背景:青;
            フレックス収縮:0;
 
        }

下の図を参照してください。

A の幅が減少しない場合は、flex-shrink を 0 に設定すると、B が減少する。 Bの最終的なサイズは、自身の幅（300px） - 親要素を超える合計幅（100px） = 200pxです。

.インナー{
            フレックスベース:200px;
            高さ:100px;
            背景：黒;
             フレックス収縮:0;
        }
        .inner1{
            flex-basis:300px;
            高さ:100px;
            背景:青;
            フレックス収縮:1;
 
        }

下の図を参照してください。

A と B の両方の幅を狭める場合、A は flex-shirk を 3 に設定し、B は flex-shirk を 2 に設定します。 A の最終的なサイズは、A の幅 (200px) - A の縮小された幅 (100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px となり、B の最終的なサイズは、B の幅 (300px) - B の縮小された幅 (100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px となります。

.インナー{
            フレックスベース:200px;
            高さ:100px;
            背景：黒;
             フレックス収縮:3;
        }
        .inner1{
            flex-basis:300px;
            高さ:100px;
            背景:青;
            フレックス収縮:2;
 
        }

下の図を参照してください。

ここで、エディターは flex が flex-grow、flex-shrink、flex-basis の略語であることを明確に示しています (文字の順序に注意してください)。次の略語規則を覚えておいてください。

たとえば、 flex値がnone場合、計算値は 0 0 auto になります。以下は同等です。

.item {flex: なし;}
。アイテム {
    フレックス成長: 0;
    フレックス収縮: 0;
    flex-basis: 自動;
}

flex が auto の場合、計算値は 1 1 auto となり、これは次の値と同等になります。

.item {flex: auto;}
。アイテム {
    フレックス成長: 1;
    フレックスシュリンク: 1;
    flex-basis: 自動;
}

flex が負でない数値の場合、その数値は flex-grow 値、flex-shrink は 1、flex-basis は 0% になります。以下は同等です。

.item {フレックス: 1;}

.item {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

flex が長さまたはパーセンテージの場合、flex-basis 値と見なされ、flex-grow は 1、flex-shrink は 1 となり、以下は同等になります (0% は負でない数値ではなくパーセンテージであることに注意してください)。

.item-1 {フレックス: 0%;}
.item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;} 
.item-2 {フレックス: 24px;} 
.item-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px;}

flex が 2 つの非負の数値を取る場合、それらはそれぞれ flex-grow と flex-shrink の値とみなされ、flex-basis は 0% を取ります。以下は同等です。

.item {フレックス: 2 3;} 
.item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%;} 
flex が負でない数値と長さまたはパーセンテージを取る場合、それらはそれぞれ flex-grow と flex-basis の値として扱われ、flex-shrink は 1 を取ります。以下は同等です。 
.item {flex: 2333 3222px;} 
.item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;}

CSS フレキシブルボックス flex-grow、flex-shrink、flex-basis の詳細な説明はこれで終わりです。flex-grow、flex-shrink、flex-basis の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL の DDL と DML についての簡単な説明

>>: JavaScript で文字列を数値に変換する方法