マージンは Flexbox レイアウトの Flex-Grow サイズ設定にどのように影響しますか?

Flex-Grow を使用した Flex 要素のサイズ変更

フレックスボックス レイアウトでは、フレックス項目は flex-grow に従ってサイズ変更されます。 プロパティ。各項目が占有する空き容量を指定します。ただし、コンテンツやマージンなど、フレックス項目の計算されたサイズに影響を与える可能性のある特定の要因があります。

問題の概要

次のコードを検討してください:

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-grow: 2;
}

#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number">
<p>この例では、「0」ボタンの幅が 2 倍になることが予想されます他のボタンと同様に、コロンボタンの幅は半分になります。ただし、これらのボタンの配置は少しずれているようです。</p>
<p></p>
<h3 id="問題の原因">問題の原因</h3>
<p>この問題は、各行で使用できるスペースが次のように決定されるために発生します。ボタンの合計幅とボタンに適用されるマージン。この例では、最初の 3 行にはそれぞれ水平方向のマージンが 2 つありますが、4 番目の行には 1 つだけあります。これにより、4 行目の空き領域が他の行よりも多くなり、フレックス項目間の領域の配分に影響します。</p>
<p></p>
<h3 id="フレックスベースを使用してより信頼性の高いサイズ設定を行う">フレックスベースを使用してより信頼性の高いサイズ設定を行う</h3>
<p><strong></strong>この問題に対処するには、<strong>flex-basis</strong> の代わりに </p>flex-basis<p> を使用することをお勧めします。 </p>flex-grow<pre class="brush:php;toolbar:false">.button {
    flex-basis: 33.33%;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

* {
    box-sizing: border-box;
}

は、フレックス項目のサイジングをより信頼性の高いものにします。フレックス ベースでは、内容と余白を考慮して項目の初期サイズを設定します。各ボタンにフレックスベースを指定することで、マージンに関係なく、すべてのボタンに同じ量のスペースが与えられるようにすることができます。

修正されたコードは次のとおりです。Byフレックスベースを更新すると、「0」ボタンの幅が他のボタンの 2 倍、コロン ボタンの幅が 1/2 になり、ボタンの希望の配置を実現できます。広いです。