Question

如果其中一个部分填充了填充物，我如何在两个项目之间保持flex-grow定义的宽度比？这是行不通的。比率取决于容器宽度。

<div style="display: flex;">
  <div style="flex-grow: 3; padding: 4rem; background-color: red;">
  </div>
  <div style="flex-grow: 2; background-color: green;">
  </div>
</div>

Answer 1

flex-grow属性不适用于灵活项目的精确大小调整。它的工作是在弹性项目中分配容器中的空间。所以flex-grow不是这项工作的最佳工具。

相反，在Flex容器中使用flex-basis，相当于width或height（取决于flex-direction）。

然后添加box-sizing: border-box以将填充集成到弹性项目的宽度中。

revised fiddle demo

＆＃13;

<div style="display: flex;">
  <div style="flex-basis: 60%; padding: 4rem ; background-color: red; box-sizing: border-box;">
  </div>
  <div style="flex-basis: 40%; background-color: green;">  
  </div>
</div>

＆＃13;

Answer 2

使用width（或flex-basis）代替flex-grow：

* {
  box-sizing: border-box; /* Don't forgert this to include padding/border inside width calculation */
}

<div style="display: flex;height:20px;margin-bottom:10px;">
  <div style="flex-grow: 3;  background-color: red;">
  </div>
  <div style="flex-grow: 2; background-color: green;">
  </div>
</div>
replace by width
<div style="display: flex;height:20px;margin-bottom:10px;">
  <div style="width:calc((3 / 5) * 100%);  background-color: red;">
  </div>
  <div style="width:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>
then add padding
<div style="display: flex;margin-bottom:10px;">
  <div style="width:calc((3 / 5) * 100%); padding:3rem; background-color: red;">
  </div>
  <div style="width:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>
same result with flex-basis
<div style="display: flex;margin-bottom:10px;">
  <div style="flex-basis:calc((3 / 5) * 100%); padding:3rem; background-color: red;">
  </div>
  <div style="flex-basis:calc((2 / 5) * 100%); background-color: green;">
  </div>
</div>

在内部项目中使用带有填充的Flexbox

2 个答案: