html - 在内部元素中使用带填充的 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 元素的精确尺寸而设计的。它的工作是在 flex 元素之间分配容器中的空间。所以 flex-grow 不是这项工作的最佳工具。

相反，使用 flex-basis ，相当于 flex 容器中的 width 或 height(取决于 flex-direction)。

然后添加box-sizing: border-box将内边距整合到 flex 元素的宽度中。

revised fiddle demo

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