web-dev-qa-db-ja.com

パディングがフレックスアイテムを拡張するのはなぜですか？

以下のスニペットでは、最初の行にflex-grow: 1。予想通り、各divは画面の50％を占めます。

左側のdivにパディングを追加する場合、これは当てはまりません。誰かが理由を説明できますか？

body > div {
  height: 50px;
  display: flex;
}
body > div > div {
  flex: 1;
  box-sizing: border-box;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
}
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>
htmlcssflexboxborder-box
20
Yair

計算は仕様で定義されています。

パディングとflex-growを含むフレックスアイテムのサイズは、 flexbox spec の計算によって決定されます。

これらの計算は、パディングとflex-shrinkを使用したフレックスアイテムのサイズ設定に似ています。

率直に言って、数学は非常に専門的であり、世界で最も簡単に理解できるものではありません。

しかし、あなたがそれに入りたいのであれば、ここに詳細があります：

例

以下は、動作をより明確にする例です。

注：flex-growは、フレックスアイテムの長さを直接設定するためのツール。これは、フレックスアイテム間でコンテナー内のスペースを分散するためのツールです。 flex-basisプロパティは、フレックスアイテムの初期メインサイズを設定します。 flex-growをflex-basisと共に使用すると、質問の問題は解決します（以下の例＃4を参照）。

例＃1

box-sizing: border-box があるブロックコンテナーでは、コード内のボックスはパディングに関係なく均等にレンダリングされます。

body > div {
  height: 50px;
  /* display: flex; */
  font-size: 0; /* remove inline block whitespace */
}
body > div > div {
  /* flex: 1; */
  box-sizing: border-box;
  height: 50px;
  display: inline-block;
  width: 50%;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddleデモ

例＃2

フレックスコンテナーで、box-sizing: border-boxとwidthまたは flex-basis は長さの計算に使用され、ボックスはパディングに関係なく均等にレンダリングされます。

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex-basis: 50%;
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddleデモ

例＃3

box-sizing: border-boxとflex-growがあるフレックスコンテナーでは、box-sizingが機能しないように見えます...

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex: 1;
  /* flex-basis: 50%; */
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddleデモ

しかし、それは本当に正しくありません...

例＃4

flex-grow フレックスコンテナー内の使用可能なスペースに基づいて、フレックスアイテムのwidthを拡張します。つまり、パディング（ およびボーダー ）を無視します。

ただし、flex-growをflex-basisと一緒に指定するだけの場合、border-boxは機能します。

flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */
  /* flex-basis: 50%; */
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

jsFiddleデモ

22
Michael_B

私の知る限り、これは正しい動作です。

flex:1はもちろん、以下の省略形です。

flex-grow:1;
flex-shrink:1;
flex-basis:0

これにより、必要に応じてdivを拡大できます。この場合、divは拡大します。実際にフレックスアイテムが異なる場合、フレックスアイテムをすべて同じサイズとして自動的に維持するわけではありません。

3
Paulie_D