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

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-basis，它相当于Flex 容器中的width或height（取决于）。flex-direction

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

修改后的小提琴演示

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