如何在Flexbox中设置左右内边距为元素宽度的10%？

当然可以不用JavaScript！纯CSS就能搞定这个需求，我给你两种靠谱的方案，看你更喜欢哪种~

方案一：嵌套inline-block容器（直观易懂） #

默认情况下，块级元素（包括Flex子项）的百分比内边距是参照父元素宽度计算的，但inline-block元素的百分比内边距是基于自身内容宽度的。利用这个特性，我们可以把每个Flex子项的内容包裹在一个inline-block容器里，直接给这个容器设置10%的左右内边距即可。

代码示例 #

.flex {
  display: flex;
  gap: 8px; /* 可选，给项目之间加些间距 */
}

.item {
  border: 2px solid red;
  white-space: nowrap;
}

/* 核心样式：用inline-block让百分比padding基于自身宽度 */
.item-content {
  display: inline-block;
  padding: 0 10%;
}

<div class="flex">
  <div class="item">
    <div class="item-content">itm1</div>
  </div>
  <div class="item">
    <div class="item-content">item2 with greater width</div>
  </div>
  <div class="item">
    <div class="item-content">item3 with the greatest width ....................................</div>
  </div>
</div>

方案二：无嵌套的比例计算法（更简洁） #

如果你不想额外增加DOM元素，可以通过数学计算来实现。我们用width: fit-content让Flex子项宽度由内容决定，再通过calc()计算出对应的内边距比例。

原理说明 #

假设内容宽度为W，我们想要左右内边距为0.1W，那么元素总宽度T = W + 2*0.1W = 1.2W，反过来推导可得W = T/1.2，所以内边距0.1W = 0.1*(T/1.2) = T*(10%/1.2)（约等于8.333%）。

代码示例 #

.flex {
  display: flex;
  gap: 8px;
}

.item {
  border: 2px solid red;
  white-space: nowrap;
  width: fit-content; /* 让宽度由内容+内边距决定 */
  padding: 0 calc(10% / 1.2); /* 计算出对应比例的内边距 */
}

<div class="flex">
  <div class="item">itm1</div>
  <div class="item">item2 with greater width</div>
  <div class="item">item3 with the greatest width ....................................</div>
</div>

两种方案对比 #

• 方案一：逻辑直观，容易维护，适合需要明确区分内容区域和内边距的场景。
• 方案二：无需额外DOM元素，代码更简洁，适合追求精简结构的场景。

两种方案都能自适应内容宽度的变化，完全不需要依赖JavaScript就能实现你要的效果~

内容的提问来源于stack exchange，提问作者Miki