32

以下のスニペットでは、最初の行に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>

4

5 に答える 5

37

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

フレックスアイテムのパディング付きのサイズで、フレックスボックス仕様flex-growの計算によって決定されます。

これらの計算は、パディングと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

があり、またはが長さの計算に使用される flex コンテナーでは、ボックスはパディングに関係なく均等にレンダリングされます。box-sizing: border-boxwidthflex-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フレックス コンテナー内の使用可能なスペースに基づいて、フレックス アイテムの幅を拡張します。つまり、パディング (とボーダー) を無視します。

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 デモ

于 2015-10-15T12:20:06.817 に答える
2

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

flex:1もちろん、次の省略形です。

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

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

于 2015-10-15T10:03:24.057 に答える