[解決済み] フレックスボックスで計算にパディングを含めるようにするには？

質問

以下は2列目です。

• 最初の行 には2つの項目があります。 flex 1 に1つ、そして flex 2 .

• 2段目 には2つの項目があります。 flex 1 .

仕様書によると 1A + 1B = 2A

しかし パディング が計算に含まれる場合、以下の例のように合計が不正になります。

QUESTION

フレックスボックスの計算にパディングを含ませて、サンプルのボックスが正しく並ぶようにするには？

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

解決方法は？

解決策

セット margin の代わりに子要素に padding を使用します。 flex アイテムになります。

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

問題点

がない状態で計算されます。 padding . そこで padding を flex 要素で期待する幅が得られません。 スペック .

具体的な記事

例えば、フローティングされたオートサイズのフレックスコンテナ内のフレックスアイテムに利用可能なスペースは。

• フレックスコンテナを含むブロックの幅から、フレックスコンテナのマージン、ボーダー、パディング（水平方向）を差し引いたもの。
• 縦方向は無限大

なぜパディングが計算されないのですか？仕様ではそうなっているのですが。

利用可能な main と cross のスペースが必要です。 flex 項目 . 各次元について、その次元の flex container のコンテンツボックスのサイズが決まっている場合は、それを使用します。 flex container の下でサイズ調整されています。 min または max-content 制約がある場合、その次元の利用可能なスペースがその制約となり、そうでない場合。 フレックスコンテナのマージン、ボーダー、パディングを、その寸法でフレックスコンテナが利用できるスペースから差し引き、その値を使用します。 . この場合、値が無限になる可能性があります。

を差し引くと padding と margin を要素のサイズから計算すると、次のようになります。

1A + 1B = 2A

しかし、そうした後に、要素にパディングが追加されました。要素が増えれば増えるほど、パディングも増えます。それが幅に計算されないので、あなたの発言が偽りになってしまうのです。