添加display:flex后内容收缩的固定宽度发票布局问题

核心问题分析 #

Flex容器默认会让子项根据可用空间收缩，哪怕设置了flex-shrink:0，如果子项内部没有明确的宽度约束（比如文本过长自动换行、子元素未设置固定宽度），依然会出现收缩。另外，若Flex容器本身没有固定宽度，也会随父容器伸缩。

具体解决方法 #

1. 给Flex容器设置固定宽度 #

确保容器本身的宽度是固定值，比如发票常用的width: 800px或者width: 210mm（A4宽度），同时禁用容器的收缩：

.invoice-container {
  display: flex;
  width: 800px; /* 固定宽度 */
  flex-wrap: nowrap; /* 禁止换行（按需调整） */
  flex-shrink: 0; /* 容器本身不收缩 */
}

2. 给Flex子项设置明确宽度+禁用收缩 #

给每个需要固定宽度的子项设置width或flex-basis，同时强制flex-shrink:0，避免子项被压缩：

.invoice-item {
  flex-basis: 200px; /* 等同于固定宽度 */
  flex-shrink: 0; /* 禁止收缩 */
  /* 可选：设置min-width兜底，防止极端情况 */
  min-width: 200px;
}

3. 处理文本溢出问题 #

如果子项内有长文本，需要设置文本不换行或溢出处理，避免文本挤压容器宽度：

.invoice-item p {
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 省略号显示（可选） */
}

4. 替代方案：使用inline-flex+固定宽度容器 #

如果直接用flex还是有问题，可以给外层套一个固定宽度的块级容器，内部用inline-flex，确保容器不随父元素伸缩：

.invoice-wrapper {
  width: 800px;
}
.invoice-container {
  display: inline-flex;
}

示例代码 #

HTML #

<div class="invoice-wrapper">
  <div class="invoice-container">
    <div class="invoice-item invoice-header">发票抬头</div>
    <div class="invoice-item invoice-number">发票号码</div>
    <div class="invoice-item invoice-date">开票日期</div>
  </div>
  <div class="invoice-container">
    <div class="invoice-item item-name">商品名称</div>
    <div class="invoice-item item-price">单价</div>
    <div class="invoice-item item-quantity">数量</div>
    <div class="invoice-item item-total">总价</div>
  </div>
</div>

CSS #

.invoice-wrapper {
  width: 800px;
  border: 1px solid #ccc;
  padding: 10px;
}
.invoice-container {
  display: flex;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.invoice-item {
  flex-basis: 200px;
  flex-shrink: 0;
  text-align: center;
  border: 1px solid #eee;
  padding: 5px;
}
.invoice-header {
  flex-basis: 266px; /* 三个子项均分800px，按需调整 */
}
.item-name {
  flex-basis: 400px; /* 按需分配宽度 */
}

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